JavaScript Canvas shadowBlur 教程
最后修改于 2025 年 4 月 3 日
在本文中，我们将探讨 JavaScript 中的 Canvas shadowBlur 属性。此属性可在 HTML Canvas 上为形状和文本创建柔和的阴影效果。掌握阴影可以增强图形的视觉深度和真实感。
基本定义
shadowBlur 属性指定应用于阴影的模糊级别。值越高，阴影越扩散、越柔和。它与 shadowColor、shadowOffsetX 和 shadowOffsetY 一起使用，以创建完整的阴影效果。
shadowBlur 值是一个非负浮点数，表示像素单位的模糊级别。值为 0 表示没有模糊（锐利阴影），而较高的值会增加模糊效果。该属性会影响所有后续的绘图操作。
基本 shadowBlur 用法
此示例演示了如何创建简单的带模糊的阴影效果。
<!DOCTYPE html>
<html>
<head>
<title>Basic shadowBlur</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 200, 100);
</script>
</body>
</html>
此示例创建一个带模糊阴影的蓝色矩形。shadowColor 设置为半透明黑色，shadowBlur 设置为 10px，shadowOffset 设置为 5px。
阴影出现在矩形的右下方。模糊效果使阴影显得柔和自然，而不是锐利和人工。
带 shadowBlur 的文本
此示例展示了如何将 shadowBlur 应用于文本以产生戏剧性效果。
<!DOCTYPE html>
<html>
<head>
<title>Text with shadowBlur</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.shadowColor = 'rgba(200, 0, 0, 0.7)';
ctx.shadowBlur = 15;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.font = '48px Arial';
ctx.fillStyle = 'white';
ctx.fillText('Hello World', 50, 100);
</script>
</body>
</html>
这里我们创建了带红色模糊阴影的白色文本。15px 的 shadowBlur 在文本字符周围产生了戏剧性的发光效果。
半透明的 shadowColor (rgba) 允许部分背景显示出来。这比不透明颜色产生了更自然的阴影效果。
具有不同 shadowBlur 的多个对象
此示例演示了对不同形状使用不同的 shadowBlur 值。
<!DOCTYPE html>
<html>
<head>
<title>Multiple shadowBlur Values</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Circle with small blur
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 5;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
// Rectangle with medium blur
ctx.shadowBlur = 15;
ctx.fillStyle = 'blue';
ctx.fillRect(200, 50, 100, 100);
// Triangle with large blur
ctx.shadowBlur = 25;
ctx.beginPath();
ctx.moveTo(300, 200);
ctx.lineTo(350, 100);
ctx.lineTo(400, 200);
ctx.closePath();
ctx.fillStyle = 'green';
ctx.fill();
</script>
</body>
</html>
此示例显示了三个具有递增 shadowBlur 值的形状。圆圈的模糊值为 5px，矩形为 15px，三角形为 25px。
注意较高的模糊值会产生更柔和、更扩散的阴影。所有形状都使用了相同的 shadowColor，以保持构图的一致性。
内部 shadowBlur 效果
此示例通过巧妙的路径操作创建了内部阴影效果。
<!DOCTYPE html>
<html>
<head>
<title>Inner shadowBlur Effect</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw background
ctx.fillStyle = '#f0f0f0';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Create clipping region
ctx.beginPath();
ctx.rect(50, 50, 200, 200);
ctx.clip();
// Draw shadow (will appear inside due to clipping)
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.fillStyle = 'white';
ctx.fillRect(50, 50, 200, 200);
// Reset shadow
ctx.shadowBlur = 0;
// Draw border
ctx.strokeStyle = '#ccc';
ctx.lineWidth = 1;
ctx.strokeRect(50, 50, 200, 200);
</script>
</body>
</html>
此技术使用裁剪来创建内部阴影效果。首先，我们设置一个与我们的形状匹配的裁剪区域，然后绘制一个会被裁剪的阴影。
结果是阴影出现在矩形内部，而不是外部，显得柔和。这对于创建嵌入式或凹陷的 UI 元素很有用。
动画 shadowBlur
此示例展示了如何为动态效果设置动画 shadowBlur 属性。
<!DOCTYPE html>
<html>
<head>
<title>Animated shadowBlur</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let blur = 0;
let direction = 1;
function animate() {
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Update blur value
blur += direction;
if (blur > 30 || blur < 0) direction *= -1;
// Draw circle with animated shadow
ctx.shadowColor = 'rgba(0, 100, 200, 0.7)';
ctx.shadowBlur = blur;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.beginPath();
ctx.arc(150, 150, 50, 0, Math.PI * 2);
ctx.fillStyle = 'white';
ctx.fill();
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
此动画围绕一个圆创建了脉冲发光效果。shadowBlur 值在 0 和 30 之间振荡，在极限处改变方向。
requestAnimationFrame 方法通过与浏览器的刷新率同步来创建流畅的动画。此技术可用于各种发光效果。
来源
在本文中，我们探索了使用 shadowBlur 在 HTML Canvas 上创建逼真和艺术性阴影效果的各种技术。这些方法极大地增强了图形的视觉吸引力。
作者
列出 所有 JS Canvas 教程。