JS Canvas 矩形凸起、凹陷、雕刻效果实现方法 - 阴影、渐变、描边

"要在canvas上创建凸起、凹陷或雕刻效果的矩形，您可以使用以下几种方法：\n\n1. 使用阴影效果：\n您可以使用canvas的阴影效果来模拟凸起、凹陷或雕刻效果。通过为矩形设置适当的阴影颜色和位置，可以创建出立体感。\n\njavascript\\nconst canvas = document.getElementById('canvas');\\nconst ctx = canvas.getContext('2d');\\n\\n// 创建凸起效果的矩形\\nctx.fillStyle = 'gray';\\nctx.shadowColor = 'black';\\nctx.shadowBlur = 10;\\nctx.fillRect(50, 50, 200, 100);\\n\\n// 创建凹陷效果的矩形\\nctx.fillStyle = 'gray';\\nctx.shadowColor = 'black';\\nctx.shadowBlur = 10;\\nctx.fillRect(300, 50, 200, 100);\\n\n\n2. 使用渐变效果：\n您可以使用canvas的渐变效果来模拟凸起、凹陷或雕刻效果。通过为矩形设置适当的渐变颜色和方向，可以创建出立体感。\n\njavascript\\nconst canvas = document.getElementById('canvas');\\nconst ctx = canvas.getContext('2d');\\n\\n// 创建凸起效果的矩形\\nconst gradient1 = ctx.createLinearGradient(50, 50, 250, 150);\\ngradient1.addColorStop(0, 'gray');\\ngradient1.addColorStop(1, 'white');\\nctx.fillStyle = gradient1;\\nctx.fillRect(50, 50, 200, 100);\\n\\n// 创建凹陷效果的矩形\\nconst gradient2 = ctx.createLinearGradient(300, 50, 500, 150);\\ngradient2.addColorStop(0, 'white');\\ngradient2.addColorStop(1, 'gray');\\nctx.fillStyle = gradient2;\\nctx.fillRect(300, 50, 200, 100);\\n\n\n3. 使用路径和描边效果：\n您可以使用canvas的路径和描边效果来模拟凸起、凹陷或雕刻效果。通过绘制矩形的路径，并为路径设置适当的描边颜色和线条宽度，可以创建出立体感。\n\njavascript\\nconst canvas = document.getElementById('canvas');\\nconst ctx = canvas.getContext('2d');\\n\\n// 创建凸起效果的矩形\\nctx.strokeStyle = 'gray';\\nctx.lineWidth = 10;\\nctx.strokeRect(50, 50, 200, 100);\\n\\n// 创建凹陷效果的矩形\\nctx.strokeStyle = 'gray';\\nctx.lineWidth = 10;\\nctx.strokeRect(300, 50, 200, 100);\\n\n\n请根据您的具体需求选择适合的方法。"