js canvas 用矩形做凸起凹陷雕刻效果

要在Canvas上实现凸起、凹陷和雕刻效果，你可以使用不同的绘图方法和属性来达到目的。

1. 凸起效果： 要实现凸起效果，你可以使用渐变填充和阴影来模拟光照效果。下面是一个简单的例子：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 绘制矩形
ctx.fillStyle = "#FF0000";
ctx.fillRect(50, 50, 200, 100);

// 创建线性渐变
var gradient = ctx.createLinearGradient(0, 0, 0, 100);
gradient.addColorStop(0, "rgba(255, 255, 255, 0.2)");
gradient.addColorStop(1, "rgba(0, 0, 0, 0.2)");

// 应用渐变填充
ctx.fillStyle = gradient;
ctx.fillRect(50, 50, 200, 100);

// 应用阴影
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.fillRect(50, 50, 200, 100);

这个例子首先绘制了一个红色矩形，然后使用渐变填充和阴影来实现凸起效果。

2. 凹陷效果： 要实现凹陷效果，你可以使用渐变填充和阴影来模拟阴影效果。下面是一个简单的例子：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 绘制矩形
ctx.fillStyle = "#FF0000";
ctx.fillRect(50, 50, 200, 100);

// 创建线性渐变
var gradient = ctx.createLinearGradient(0, 0, 0, 100);
gradient.addColorStop(0, "rgba(0, 0, 0, 0.2)");
gradient.addColorStop(1, "rgba(255, 255, 255, 0.2)");

// 应用渐变填充
ctx.fillStyle = gradient;
ctx.fillRect(50, 50, 200, 100);

// 应用阴影
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = -5;
ctx.shadowOffsetY = -5;
ctx.fillRect(50, 50, 200, 100);

这个例子首先绘制了一个红色矩形，然后使用渐变填充和阴影来实现凹陷效果。

3. 雕刻效果： 要实现雕刻效果，你可以使用不同的阴影和透明度来模拟刻痕和浮雕效果。下面是一个简单的例子：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 绘制矩形
ctx.fillStyle = "#FF0000";
ctx.fillRect(50, 50, 200, 100);

// 应用浮雕效果
ctx.shadowColor = "rgba(255, 255, 255, 0.2)";
ctx.shadowBlur = 5;
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.globalCompositeOperation = "source-atop";
ctx.fillRect(50, 50, 200, 100);

// 应用刻痕效果
ctx.fillStyle = "rgba(0, 0, 0, 0.2)";
ctx.fillRect(50, 50, 200, 100);

这个例子首先绘制了一个红色矩形，然后使用阴影和透明度来实现浮雕效果。最后，使用黑色半透明矩形来实现刻痕效果。

你可以根据需要调整渐变、阴影和透明度的参数，以获得更好的效果