JS Canvas 矩形凸起、凹陷、雕刻效果实现 - 无填充色

要实现矩形的凸起、凹陷、雕刻效果，可以利用canvas的绘图API来绘制不同的图案。以下是几个示例：

1. 凸起效果：

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

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.strokeStyle = "#000000";
ctx.lineWidth = 5;
ctx.stroke();

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(75, 25);
ctx.lineTo(175, 25);
ctx.lineTo(150, 50);
ctx.closePath();
ctx.fillStyle = "#ff0000";
ctx.fill();

2. 凹陷效果：

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

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.strokeStyle = "#000000";
ctx.lineWidth = 5;
ctx.stroke();

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(75, 25);
ctx.lineTo(125, 25);
ctx.lineTo(150, 50);
ctx.closePath();
ctx.fillStyle = "#ffffff";
ctx.fill();

3. 雕刻效果：

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

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.strokeStyle = "#000000";
ctx.lineWidth = 5;
ctx.stroke();

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(75, 25);
ctx.lineTo(125, 25);
ctx.lineTo(150, 50);
ctx.closePath();
ctx.strokeStyle = "#ffffff";
ctx.lineWidth = 5;
ctx.stroke();

以上代码分别实现了矩形的凸起、凹陷和雕刻效果，其中不填充颜色，只使用线条来绘制图案。你可以根据具体需求调整绘制的线条样式和位置来达到不同的效果。