简介
HTML5 Canvas 提供了强大的绘图能力，其中阴影绘制是创建炫酷视觉效果的重要技巧之一。通过使用 shadowBlur、shadowColor 和 shadowOffsetX、shadowOffsetY 等属性，开发者可以在 Canvas 上实现阴影效果，为图形和文本增添深度和动感。
阴影绘制基础
阴影颜色（shadowColor）
shadowColor 属性用于设置阴影的颜色。它接受与 fillStyle 和 strokeStyle 相同的颜色值，包括颜色名、十六进制代码、RGB、RGBA 等。
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
阴影模糊度（shadowBlur）
shadowBlur 属性定义阴影的模糊程度。数值越大，阴影越模糊。
ctx.shadowBlur = 10;
阴影偏移量（shadowOffsetX 和 shadowOffsetY）
shadowOffsetX 和 shadowOffsetY 属性定义阴影相对于图形的水平偏移量和垂直偏移量。
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
阴影绘制示例
以下是一个使用 HTML5 Canvas 绘制带阴影的矩形的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas 阴影绘制示例</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 设置阴影属性
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
// 绘制带阴影的矩形
ctx.fillRect(50, 50, 100, 100);
</script>
</body>
</html>
高级技巧
阴影组合
在绘制多个阴影时，可以通过调整 shadowBlur 和 shadowOffsetX/Y 的值来创建复杂的阴影效果。
ctx.shadowColor = 'rgba(0, 0, 255, 0.5)';
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 20;
ctx.fillRect(150, 50, 100, 100);
ctx.shadowColor = 'rgba(255, 0, 0, 0.5)';
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 20;
ctx.shadowOffsetY = 0;
ctx.fillRect(250, 50, 100, 100);
文本阴影
同样，文本也可以应用阴影效果，为文本增添视觉吸引力。
ctx.font = '24px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello, Canvas!', 50, 100);
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 5;
ctx.fillText('Hello, Canvas!', 50, 100);
总结
HTML5 Canvas 的阴影绘制功能为开发者提供了丰富的视觉效果创作空间。通过灵活运用 shadowColor、shadowBlur 和 shadowOffsetX/Y 属性，可以轻松实现炫酷的阴影效果，为网页和应用程序增添动感和深度。