JS Canvas 矩形：凸起、凹陷和雕刻效果教程

{"title":"JS Canvas 矩形：凸起、凹陷和雕刻效果教程","description":"学习如何使用 JavaScript Canvas API 创建逼真的凸起、凹陷和雕刻效果。本文提供详细的代码示例和解释，帮助你轻松实现这些视觉效果。","keywords":"js canvas, 矩形, 凸起, 凹陷, 雕刻, 阴影, 渐变, globalCompositeOperation, 视觉效果, 教程","content":"要实现凸起、凹陷和雕刻效果，可以利用canvas的绘图功能和阴影效果来实现。\n\n1. 凸起效果：\n可以通过绘制一个矩形，并为其设置渐变填充来实现凸起效果。具体步骤如下：\njavascript\nvar canvas = document.getElementById("myCanvas");\nvar ctx = canvas.getContext("2d");\n\n// 绘制一个矩形\nctx.fillStyle = "gray";\nctx.fillRect(50, 50, 200, 100);\n\n// 设置渐变色填充\nvar gradient = ctx.createLinearGradient(50, 50, 50, 150);\ngradient.addColorStop(0, "white");\ngradient.addColorStop(1, "gray");\nctx.fillStyle = gradient;\nctx.fillRect(50, 50, 200, 100);\n\n\n2. 凹陷效果：\n可以通过绘制两个矩形，一个填充颜色较浅的矩形和一个填充颜色较深的矩形，并利用globalCompositeOperation属性将两个矩形进行叠加，从而实现凹陷效果。具体步骤如下：\njavascript\nvar canvas = document.getElementById("myCanvas");\nvar ctx = canvas.getContext("2d");\n\n// 绘制一个矩形，填充颜色较浅\nctx.fillStyle = "lightgray";\nctx.fillRect(50, 50, 200, 100);\n\n// 设置globalCompositeOperation属性为"source-out"\nctx.globalCompositeOperation = "source-out";\n\n// 绘制一个矩形，填充颜色较深\nctx.fillStyle = "gray";\nctx.fillRect(50, 50, 200, 100);\n\n\n3. 雕刻效果：\n可以通过绘制一个矩形，并为其设置阴影效果来实现雕刻效果。具体步骤如下：\njavascript\nvar canvas = document.getElementById("myCanvas");\nvar ctx = canvas.getContext("2d");\n\n// 绘制一个矩形\nctx.fillStyle = "gray";\nctx.fillRect(50, 50, 200, 100);\n\n// 设置阴影效果\nctx.shadowOffsetX = 5;\nctx.shadowOffsetY = 5;\nctx.shadowBlur = 5;\nctx.shadowColor = "black";\n\n\n通过以上方法，可以实现canvas矩形的凸起、凹陷和雕刻效果。"}