JavaScript Canvas shadowOffsetY 教程
最后修改于 2025 年 4 月 3 日
在本文中，我们将探讨 JavaScript 中的 Canvas shadowOffsetY 属性。此属性控制 HTML Canvas 绘图中阴影的垂直偏移。掌握阴影可以增强图形的深度和真实感。
基本定义
shadowOffsetY 属性指定了阴影相对于形状的垂直距离。正值将阴影向下移动，负值将其向上移动。它与 shadowColor、shadowBlur 和 shadowOffsetX 一起使用，以实现完全控制。
阴影属性必须在绘制形状之前设置。shadowOffsetY 的默认值为 0（无垂直偏移）。与其他阴影属性结合使用时，它可以创建逼真的光照效果。
shadowOffsetY 基本用法
此示例演示了如何创建具有垂直偏移的简单阴影。
<!DOCTYPE html>
<html>
<head>
<title>Basic shadowOffsetY</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.shadowOffsetY = 15;
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 200, 100);
</script>
</body>
</html>
此代码创建了一个带有半透明黑色阴影的蓝色矩形。由于 shadowOffsetY，阴影出现在矩形下方 15 像素处。
shadowColor 使用 rgba 实现透明度。shadowBlur 使边缘柔化。阴影仅出现在形状下方，因为我们仅设置了垂直偏移。
负数 shadowOffsetY
此示例展示了负值如何创建对象上方的阴影。
<!DOCTYPE html>
<html>
<head>
<title>Negative shadowOffsetY</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(255, 0, 0, 0.7)';
ctx.shadowBlur = 5;
ctx.shadowOffsetY = -10;
ctx.fillStyle = 'yellow';
ctx.beginPath();
ctx.arc(150, 100, 50, 0, Math.PI * 2);
ctx.fill();
</script>
</body>
</html>
这里我们创建了一个黄色圆形，其上方有一个红色的阴影。负数 shadowOffsetY (-10) 将阴影向上移动。
半透明的红色阴影 (rgba) 在圆形上方产生发光效果。此技术可以模拟来自下方的光线。
组合 shadowOffsetX 和 shadowOffsetY
此示例演示了使用 X 和 Y 偏移量创建对角线阴影。
<!DOCTYPE html>
<html>
<head>
<title>Combined Shadow Offsets</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.6)';
ctx.shadowBlur = 15;
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.fillStyle = 'green';
ctx.fillRect(50, 50, 200, 100);
</script>
</body>
</html>
这创建了一个带有对角线右下偏移阴影的绿色矩形。X 和 Y 偏移量的组合（均为 10）将阴影定位在 45° 角。
15 的 shadowBlur 创建了一种柔和、扩散的阴影效果。rgba 的 alpha 值 (0.6) 使阴影部分透明。
动画 shadowOffsetY
此示例展示了如何为 shadowOffsetY 属性设置动画以实现动态效果。
<!DOCTYPE html>
<html>
<head>
<title>Animated shadowOffsetY</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let offset = 0;
let direction = 1;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.shadowColor = 'rgba(0, 0, 200, 0.5)';
ctx.shadowBlur = 10;
ctx.shadowOffsetY = offset;
ctx.fillStyle = 'orange';
ctx.fillRect(100, 50, 100, 100);
offset += direction;
if (offset > 20 || offset < 0) direction *= -1;
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
此动画使阴影连续上下移动。偏移量在 0 和 20 之间变化，并在极限处反转方向。
requestAnimationFrame 方法可创建流畅的动画。阴影似乎在橙色正方形下方跳动，从而产生漂浮效果。
带 shadowOffsetY 的文本
此示例将 shadowOffsetY 应用于文本，以实现时尚的排版效果。
<!DOCTYPE html>
<html>
<head>
<title>Text with shadowOffsetY</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Large text with subtle shadow
ctx.shadowColor = 'rgba(100, 100, 100, 0.7)';
ctx.shadowBlur = 3;
ctx.shadowOffsetY = 3;
ctx.font = 'bold 48px Arial';
ctx.fillStyle = 'white';
ctx.fillText('Hello World', 50, 100);
// Small text with strong shadow
ctx.shadowColor = 'black';
ctx.shadowBlur = 0;
ctx.shadowOffsetY = 2;
ctx.font = '20px Arial';
ctx.fillStyle = 'pink';
ctx.fillText('shadowOffsetY example', 50, 150);
</script>
</body>
</html>
这演示了两种具有不同阴影效果的文本样式。大号文本具有柔和、微妙的阴影，而小号文本具有清晰的阴影。
请注意 shadowBlur 如何影响柔和度。第一个阴影使用 rgba 实现透明度，而第二个阴影使用纯黑色实现清晰的边缘。
来源
在本文中，我们探讨了用于在 Canvas 中创建垂直阴影效果的 shadowOffsetY 属性。这些技术为 Web 应用程序中的图形和文本元素增加了深度和维度。
作者
列出 所有 JS Canvas 教程。