JavaScript Canvas 凸起、凹陷、雕刻效果实现教程

要在JavaScript的Canvas中实现凸起、凹陷和雕刻效果，可以通过绘制不同形状的图形以及使用阴影和渐变来实现。\n\n以下是使用Canvas绘制凸起（emboss）效果的示例代码：\n\njavascript\nvar canvas = document.getElementById("myCanvas");\nvar ctx = canvas.getContext("2d");\n\n// 绘制背景\nctx.fillStyle = "lightgray";\nctx.fillRect(0, 0, canvas.width, canvas.height);\n\n// 绘制凸起效果\nctx.fillStyle = "gray";\nctx.shadowColor = "black";\nctx.shadowOffsetX = 3;\nctx.shadowOffsetY = 3;\nctx.shadowBlur = 5;\n\nctx.beginPath();\nctx.moveTo(50, 50);\nctx.lineTo(150, 50);\nctx.lineTo(150, 150);\nctx.lineTo(50, 150);\nctx.closePath();\nctx.fill();\n\n\n要实现凹陷（deboss）效果，只需将阴影的偏移量和模糊半径调整为负值即可：\n\njavascript\n// 绘制凹陷效果\nctx.fillStyle = "gray";\nctx.shadowColor = "black";\nctx.shadowOffsetX = -3;\nctx.shadowOffsetY = -3;\nctx.shadowBlur = 5;\n\nctx.beginPath();\nctx.moveTo(200, 50);\nctx.lineTo(300, 50);\nctx.lineTo(300, 150);\nctx.lineTo(200, 150);\nctx.closePath();\nctx.fill();\n\n\n要实现雕刻（engrave）效果，可以使用渐变来模拟阴影效果：\n\njavascript\n// 绘制雕刻效果\nvar gradient = ctx.createLinearGradient(350, 50, 350, 150);\ngradient.addColorStop(0, "gray");\ngradient.addColorStop(1, "black");\n\nctx.fillStyle = gradient;\n\nctx.beginPath();\nctx.moveTo(350, 50);\nctx.lineTo(450, 50);\nctx.lineTo(450, 150);\nctx.lineTo(350, 150);\nctx.closePath();\nctx.fill();\n\n\n通过调整阴影的属性、使用渐变和绘制不同形状的图形，可以实现更多不同的效果。