Canvas产生阴影

Canvas 是 HTML5 中的一个绘图 API，它可以让你在网页上动态地创建图形。为了在 Canvas 上添加阴影效果，你需要使用 `shadowOffsetX` 和 `shadowOffsetY` 属性来设置阴影偏移量，`shadowBlur` 属性来控制阴影模糊程度，`shadowColor` 来设置阴影颜色。下面是一个简单的例子：

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 设置阴影属性
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 10; // 可调整模糊度
ctx.shadowColor = 'black'; // 阴影颜色

// 绘制矩形并添加阴影
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

// 如果你想让矩形本身也有颜色，需要先清除阴影
ctx.shadowBlur = 0;
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);
</script>

在这个示例中，矩形会被画出黑色的阴影。如果你想要改变阴影效果，只需修改相应的 Shadow 属性即可。