JS Canvas 矩形凸起、凹陷和雕刻效果实现

要在 JS 的 Canvas 中实现矩形的凸起、凹陷和雕刻效果，可以使用阴影和渐变来模拟这些效果。以下是一个示例代码：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 矩形的凸起效果
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 4;
ctx.shadowBlur = 5;
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';

ctx.fillStyle = 'blue';
ctx.fillRect(20, 20, 100, 100);

// 矩形的凹陷效果
ctx.shadowOffsetX = -4;
ctx.shadowOffsetY = -4;
ctx.shadowBlur = 5;
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';

ctx.fillStyle = 'red';
ctx.fillRect(140, 20, 100, 100);

// 矩形的雕刻效果
var gradient = ctx.createLinearGradient(260, 20, 360, 120);
gradient.addColorStop(0, 'white');
gradient.addColorStop(0.4, 'gray');
gradient.addColorStop(1, 'black');

ctx.fillStyle = gradient;
ctx.fillRect(260, 20, 100, 100);

在上述代码中，我们首先使用shadowOffsetX和shadowOffsetY属性设置阴影的偏移量，shadowBlur属性设置阴影的模糊程度，shadowColor属性设置阴影的颜色。然后使用fillRect方法绘制矩形，并设置不同的填充色。

对于凸起效果，我们将阴影的偏移量设置为正值，使阴影出现在矩形的右下方。

对于凹陷效果，我们将阴影的偏移量设置为负值，使阴影出现在矩形的左上方。

对于雕刻效果，我们使用createLinearGradient方法创建一个线性渐变对象，并通过addColorStop方法设置渐变的颜色。然后将渐变对象作为fillStyle属性的值，绘制矩形。

注意，以上示例中的myCanvas是一个 HTML 中的 Canvas 元素的 ID，你可以根据自己的情况进行修改。