JS Canvas 矩形凸起、凹陷、雕刻效果实现教程

要实现矩形的凸起、凹陷和雕刻效果，可以使用Canvas的绘制API来绘制不同的图形效果。

1. 凸起效果： 可以使用Canvas的strokeRect方法来绘制矩形的边框，并使用lineWidth属性设置边框的宽度，使其突出显示。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.lineWidth = 5;
ctx.strokeRect(50, 50, 200, 100);

2. 凹陷效果： 可以使用Canvas的fillRect方法来绘制一个填充的矩形，并使用shadowOffsetX、shadowOffsetY、shadowBlur和shadowColor属性设置阴影效果，使其看起来凹陷。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 5;
ctx.shadowColor = 'black';

ctx.fillRect(50, 50, 200, 100);

3. 雕刻效果： 可以使用Canvas的lineTo方法和arcTo方法来绘制自定义的路径，以实现雕刻效果。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(250, 50);
ctx.arcTo(250, 150, 50, 150, 50);
ctx.lineTo(50, 150);
ctx.lineTo(50, 50);
ctx.stroke();

以上示例代码只是简单示范了如何实现凸起、凹陷和雕刻效果，你可以根据自己的需求进行进一步的调整和优化。