js canvas 矩形做凸起凹陷雕刻效果

要实现凸起、凹陷和雕刻效果，可以利用canvas的绘图功能和阴影效果来实现。

1. 凸起效果： 可以通过绘制一个矩形，并为其设置渐变填充来实现凸起效果。具体步骤如下：

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

// 绘制一个矩形
ctx.fillStyle = "gray";
ctx.fillRect(50, 50, 200, 100);

// 设置渐变色填充
var gradient = ctx.createLinearGradient(50, 50, 50, 150);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "gray");
ctx.fillStyle = gradient;
ctx.fillRect(50, 50, 200, 100);

2. 凹陷效果： 可以通过绘制两个矩形，一个填充颜色较浅的矩形和一个填充颜色较深的矩形，并利用globalCompositeOperation属性将两个矩形进行叠加，从而实现凹陷效果。具体步骤如下：

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

// 绘制一个矩形，填充颜色较浅
ctx.fillStyle = "lightgray";
ctx.fillRect(50, 50, 200, 100);

// 设置globalCompositeOperation属性为"source-out"
ctx.globalCompositeOperation = "source-out";

// 绘制一个矩形，填充颜色较深
ctx.fillStyle = "gray";
ctx.fillRect(50, 50, 200, 100);

3. 雕刻效果： 可以通过绘制一个矩形，并为其设置阴影效果来实现雕刻效果。具体步骤如下：

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

// 绘制一个矩形
ctx.fillStyle = "gray";
ctx.fillRect(50, 50, 200, 100);

// 设置阴影效果
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 5;
ctx.shadowColor = "black";

通过以上方法，可以实现canvas矩形的凸起、凹陷和雕刻效果