JavaScript Canvas shadowColor 教程
最后修改于 2025 年 4 月 3 日
在本文中，我们将探讨 JavaScript 中的 Canvas shadowColor 属性。此属性对于在 HTML canvas 图形中创建逼真的阴影至关重要。掌握阴影可以增强可视化效果的深度和真实感。
基本定义
shadowColor 定义在 canvas 上绘制的阴影的颜色。它与其他阴影属性（如 shadowBlur、shadowOffsetX 和 shadowOffsetY）配合使用。阴影可以应用于形状和文本的填充和描边。
shadowColor 属性接受 CSS 颜色值，包括命名颜色、十六进制、rgb、rgba、hsl 和 hsla。默认值为完全透明的黑色。
基本阴影用法
此示例演示了如何在矩形上创建简单的阴影效果。
<!DOCTYPE html>
<html>
<head>
<title>Basic Canvas Shadow</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 定义阴影边缘的柔和程度，而 offsetX/Y 定位阴影。
蓝色矩形投射了一个阴影，该阴影向右和向下偏移 5px，并带有 10px 的模糊效果。这创造了一个简单而有效的投影效果。
彩色阴影
此示例展示了如何创建具有不同颜色阴影。
<!DOCTYPE html>
<html>
<head>
<title>Colored Shadows</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Red shadow
ctx.shadowColor = 'rgba(255, 0, 0, 0.7)';
ctx.shadowBlur = 15;
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.fillStyle = 'yellow';
ctx.fillRect(50, 50, 100, 100);
// Blue shadow
ctx.shadowColor = 'rgba(0, 0, 255, 0.5)';
ctx.shadowBlur = 20;
ctx.shadowOffsetX = -10;
ctx.shadowOffsetY = 10;
ctx.fillStyle = 'white';
ctx.fillRect(250, 50, 100, 100);
// Green shadow
ctx.shadowColor = 'rgba(0, 255, 0, 0.6)';
ctx.shadowBlur = 5;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 15;
ctx.fillStyle = 'purple';
ctx.fillRect(150, 180, 100, 100);
</script>
</body>
</html>
在这里，我们创建了三个带有不同彩色阴影的正方形。每个阴影都有独特的颜色、模糊量和偏移值，展示了其灵活性。
第一个正方形有一个红色阴影，第二个有一个蓝色阴影（带有负 offsetX），第三个有一个绿色阴影。请注意 shadowColor 如何影响整个阴影的外观。
文本阴影
此示例演示了如何将阴影应用于 canvas 上的文本元素。
<!DOCTYPE html>
<html>
<head>
<title>Text Shadows</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Shadow for first text
ctx.shadowColor = 'black';
ctx.shadowBlur = 5;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
ctx.font = '30px Arial';
ctx.fillStyle = 'white';
ctx.fillText('Hello World!', 50, 80);
// Different shadow for second text
ctx.shadowColor = 'rgba(200, 0, 200, 0.8)';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = -5;
ctx.shadowOffsetY = 5;
ctx.font = 'bold 40px Verdana';
ctx.fillStyle = 'yellow';
ctx.fillText('Canvas Shadows', 50, 150);
</script>
</body>
</html>
此示例展示了阴影如何与文本协同工作。第一个文本有一个简单的黑色阴影，而第二个文本使用了带有负 offsetX 的紫色阴影。
文本阴影遵循与形状阴影相同的原则。阴影出现在文本字形后面，提高了可读性和视觉吸引力。
内阴影效果
此示例通过巧妙的路径操作创建了内阴影效果。
<!DOCTYPE html>
<html>
<head>
<title>Inner Shadows</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw clipping region
ctx.beginPath();
ctx.rect(50, 50, 200, 200);
ctx.clip();
// Draw larger shadowed rectangle
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 15;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.fillStyle = 'lightblue';
ctx.fillRect(30, 30, 240, 240);
// Draw main rectangle (clipped)
ctx.fillStyle = 'white';
ctx.fillRect(50, 50, 200, 200);
</script>
</body>
</html>
此技术通过首先设置剪辑区域来创建内阴影。然后，我们绘制一个较大的带阴影的矩形，该矩形将被该区域剪辑。
最后，我们绘制主要的矩形，该矩形覆盖了大部分阴影，只留下边缘可见。这创造了内阴影的错觉。
复杂阴影效果
此示例结合了多种阴影效果，创造出精致的效果。
<!DOCTYPE html>
<html>
<head>
<title>Complex Shadows</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Background gradient
const gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, '#1e5799');
gradient.addColorStop(1, '#7db9e8');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 400, 400);
// First shadow layer
ctx.shadowColor = 'rgba(0, 0, 0, 0.4)';
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.fillStyle = '#ff6b6b';
ctx.beginPath();
ctx.arc(200, 150, 80, 0, Math.PI * 2);
ctx.fill();
// Second shadow layer
ctx.shadowColor = 'rgba(255, 255, 255, 0.3)';
ctx.shadowBlur = 15;
ctx.shadowOffsetX = -5;
ctx.shadowOffsetY = -5;
ctx.fillStyle = '#4ecdc4';
ctx.beginPath();
ctx.arc(300, 250, 60, 0, Math.PI * 2);
ctx.fill();
// Third element with no shadow
ctx.shadowColor = 'transparent';
ctx.fillStyle = '#ffe66d';
ctx.beginPath();
ctx.arc(100, 250, 50, 0, Math.PI * 2);
ctx.fill();
</script>
</body>
</html>
这个高级示例将多种阴影效果与渐变背景结合。第一个圆有一个暗阴影，第二个有一个亮阴影，第三个没有阴影。
通过叠加不同的阴影效果，我们创造了深度和视觉趣味。请注意，我们如何在需要时将 shadowColor 重置为透明以移除阴影。
来源
在本文中，我们探讨了在 HTML canvas 上创建阴影的各种技术。从基本的投影阴影到复杂的叠加效果，阴影为您的 canvas 图形增加了深度和真实感。
作者
列出 所有 JS Canvas 教程。