JavaScript Canvas 矩形特效：凸起、凹陷、雕刻 - 代码示例

要在JavaScript的canvas上创建一个凸起、凹陷或雕刻的矩形，可以使用canvas的绘制路径和描边方法。下面是分别创建凸起、凹陷和雕刻效果的示例代码：\n\n1. 凸起效果：\njavascript\nvar canvas = document.getElementById("myCanvas");\nvar ctx = canvas.getContext("2d");\n\nctx.beginPath();\nctx.moveTo(50, 50);\nctx.lineTo(150, 50);\nctx.lineTo(150, 150);\nctx.lineTo(50, 150);\nctx.closePath();\n\nctx.lineWidth = 5;\nctx.strokeStyle = "#000000";\nctx.stroke();\n\n\n2. 凹陷效果：\njavascript\nvar canvas = document.getElementById("myCanvas");\nvar ctx = canvas.getContext("2d");\n\nctx.beginPath();\nctx.moveTo(50, 50);\nctx.lineTo(150, 50);\nctx.lineTo(150, 150);\nctx.lineTo(50, 150);\nctx.closePath();\n\nctx.lineWidth = 5;\nctx.strokeStyle = "#000000";\nctx.stroke();\n\nctx.beginPath();\nctx.moveTo(50, 50);\nctx.lineTo(75, 75);\nctx.lineTo(125, 75);\nctx.lineTo(150, 50);\nctx.closePath();\n\nctx.fillStyle = "#000000";\nctx.fill();\n\n\n3. 雕刻效果：\njavascript\nvar canvas = document.getElementById("myCanvas");\nvar ctx = canvas.getContext("2d");\n\nctx.beginPath();\nctx.moveTo(50, 50);\nctx.lineTo(150, 50);\nctx.lineTo(150, 150);\nctx.lineTo(50, 150);\nctx.closePath();\n\nctx.lineWidth = 5;\nctx.strokeStyle = "#000000";\nctx.stroke();\n\nctx.beginPath();\nctx.moveTo(50, 50);\nctx.lineTo(75, 75);\nctx.lineTo(125, 75);\nctx.lineTo(150, 50);\nctx.closePath();\n\nctx.fillStyle = "#000000";\nctx.fill();\n\nctx.beginPath();\nctx.moveTo(75, 75);\nctx.lineTo(125, 75);\nctx.lineTo(125, 125);\nctx.lineTo(75, 125);\nctx.closePath();\n\nctx.fillStyle = "#ffffff";\nctx.fill();\n\n\n这些示例代码分别绘制了一个凸起、凹陷和雕刻的矩形，可以根据需求修改线条颜色、线宽、填充颜色等属性。在canvas上绘制这些图形时，需要使用moveTo()和lineTo()方法来定义路径，使用stroke()方法描边，使用fill()方法填充。