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

要在JavaScript的Canvas中创建一个凸起、凹陷或雕刻的矩形，可以使用以下方法：\n\n1. 凸起矩形：在Canvas上绘制一个矩形，然后通过绘制两条边框线来模拟凸起效果。可以使用context.strokeStyle属性设置边框颜色和宽度。\n\njavascript\nvar canvas = document.getElementById("myCanvas");\nvar ctx = canvas.getContext("2d");\n\nctx.fillStyle = "blue";\nctx.fillRect(50, 50, 200, 100);\n\nctx.strokeStyle = "white";\nctx.lineWidth = 3;\nctx.beginPath();\nctx.moveTo(50, 50);\nctx.lineTo(250, 50);\nctx.moveTo(50, 150);\nctx.lineTo(250, 150);\nctx.stroke();\n\n\n2. 凹陷矩形：与凸起矩形类似，先绘制一个矩形，然后通过绘制两条边框线来模拟凹陷效果。可以使用context.strokeStyle属性设置边框颜色和宽度。\n\njavascript\nvar canvas = document.getElementById("myCanvas");\nvar ctx = canvas.getContext("2d");\n\nctx.fillStyle = "blue";\nctx.fillRect(50, 50, 200, 100);\n\nctx.strokeStyle = "white";\nctx.lineWidth = 3;\nctx.beginPath();\nctx.moveTo(50, 50);\nctx.lineTo(250, 50);\nctx.moveTo(50, 150);\nctx.lineTo(250, 150);\nctx.stroke();\n\n\n3. 雕刻矩形：在Canvas上绘制一个矩形，然后使用渐变或阴影效果来模拟雕刻的效果。可以使用context.createLinearGradient()方法创建线性渐变对象，并通过context.fillStyle属性设置渐变样式。\n\njavascript\nvar canvas = document.getElementById("myCanvas");\nvar ctx = canvas.getContext("2d");\n\nvar gradient = ctx.createLinearGradient(50, 50, 250, 150);\ngradient.addColorStop(0, "blue");\ngradient.addColorStop(1, "white");\n\nctx.fillStyle = gradient;\nctx.fillRect(50, 50, 200, 100);\n\n\n以上是三种常见的方法，你也可以结合使用不同的绘制方法和属性来实现其他效果。