js canvas 矩形做凸起凹陷雕刻效果不要填充色

要实现矩形的凸起、凹陷和雕刻效果，可以使用canvas的绘制路径和渐变效果。以下是一个示例代码，实现了一个凸起的矩形：

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

const width = canvas.width;
const height = canvas.height;

// 渐变颜色
const gradient = ctx.createLinearGradient(0, 0, width, height);
gradient.addColorStop(0, "rgba(255, 255, 255, 0.5)");
gradient.addColorStop(1, "rgba(0, 0, 0, 0.5)");

// 绘制凸起的矩形
ctx.beginPath();
ctx.moveTo(20, 20); // 左上角
ctx.lineTo(180, 20); // 右上角
ctx.lineTo(200, 40); // 右下角
ctx.lineTo(200, 180); // 左下角
ctx.lineTo(20, 180); // 左上角
ctx.closePath();

ctx.fillStyle = gradient;
ctx.strokeStyle = "rgba(0, 0, 0, 0.5)";
ctx.lineWidth = 2;
ctx.fill();
ctx.stroke();

这段代码使用ctx.createLinearGradient创建一个线性渐变，然后使用addColorStop方法添加两个颜色节点，分别为白色和黑色。接下来，通过beginPath开始绘制路径，使用moveTo和lineTo绘制矩形的四个角，最后使用closePath闭合路径。然后，设置fillStyle为渐变色，strokeStyle为半透明黑色，lineWidth为2，通过fill和stroke方法填充和描边矩形。

你可以根据需要调整渐变色、线条颜色、线条宽度和路径的坐标点来实现不同的效果，如凹陷和雕刻效果