JavaScript Canvas shadowOffsetX 教程
最后修改于 2025 年 4 月 3 日
在本文中，我们将探讨 JavaScript 中的 Canvas shadowOffsetX 属性。此属性控制 HTML canvas 中阴影的水平偏移。掌握阴影效果对于在图形中创建深度和真实感至关重要。
基本定义
shadowOffsetX 属性指定阴影与形状的水平距离。正值将阴影向右移动，负值将其向左移动。它与 shadowColor、shadowBlur 和 shadowOffsetY 一起用于创建阴影。
默认值为 0（无水平偏移）。该属性会影响所有后续的阴影形状，直到被更改。它以像素为单位测量，并且可以是小数以实现精确的定位。
基本 shadowOffsetX 用法
此示例演示了如何创建具有水平偏移的简单阴影。
<!DOCTYPE html>
<html>
<head>
<title>Basic shadowOffsetX</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 = 15;
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 200, 100);
</script>
</body>
</html>
在这个基本示例中，我们创建了一个 canvas 元素并获取其 2D 上下文。我们设置了包括 shadowOffsetX 在内的阴影属性，值为 15 像素。
阴影出现在蓝色矩形的右侧 15 像素处。shadowColor 使用 rgba 来实现透明度，shadowBlur 则使阴影边缘柔和。
负数 shadowOffsetX
此示例显示负值如何创建位于形状左侧的阴影。
<!DOCTYPE html>
<html>
<head>
<title>Negative shadowOffsetX</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.shadowOffsetX = -20;
ctx.fillStyle = 'yellow';
ctx.beginPath();
ctx.arc(150, 100, 50, 0, Math.PI * 2);
ctx.fill();
</script>
</body>
</html>
在这里，我们创建了一个带有红色阴影的黄色圆形，其偏移量为 20 像素向左。负的 shadowOffsetX 值会将阴影向相反方向移动。
阴影具有 70% 的不透明度和轻微的模糊效果。这展示了如何创建看起来来自右侧光源的阴影效果。
结合 shadowOffsetX 和 shadowOffsetY
此示例演示如何使用两个偏移属性创建对角线阴影。
<!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>
这会创建一个绿色矩形，其阴影在水平和垂直方向上都偏移了 10 像素。组合偏移量产生了对角线阴影。
阴影看起来来自左上角的 T 角的光源。模糊效果使阴影看起来更自然、更逼真。
动态 shadowOffsetX 动画
此示例通过动画化 shadowOffsetX 属性来创建移动阴影效果。
<!DOCTYPE html>
<html>
<head>
<title>Animated shadowOffsetX</title>
</head>
<body>
<canvas id="myCanvas" width="400" 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(100, 100, 255, 0.8)';
ctx.shadowBlur = 20;
ctx.shadowOffsetX = offset;
ctx.fillStyle = 'purple';
ctx.fillRect(150, 50, 100, 100);
offset += direction;
if (offset > 30 || offset < -30) direction *= -1;
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
此动画展示了一个带有蓝色阴影的紫色方形，该阴影前后移动。shadowOffsetX 值在 -30 到 30 像素之间连续变化。
动画循环在每一帧都清除并重绘 canvas。当偏移量达到极限时，方向会反转，从而产生乒乓球效果。
带 shadowOffsetX 的文本
此示例演示了将 shadowOffsetX 应用于文本以实现时尚的排版。
<!DOCTYPE html>
<html>
<head>
<title>Text Shadow with shadowOffsetX</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// First text with right shadow
ctx.shadowColor = 'rgba(200, 0, 0, 0.7)';
ctx.shadowBlur = 5;
ctx.shadowOffsetX = 8;
ctx.shadowOffsetY = 3;
ctx.font = '40px Arial';
ctx.fillStyle = 'white';
ctx.fillText('Hello Canvas', 50, 100);
// Second text with left shadow
ctx.shadowColor = 'rgba(0, 0, 200, 0.7)';
ctx.shadowOffsetX = -8;
ctx.fillText('Shadow Effect', 50, 150);
</script>
</body>
</html>
这创建了两行文本，具有不同的阴影方向。第一行文本具有向右偏移的红色阴影，而第二行文本具有向左偏移的蓝色阴影。
该示例展示了 shadowOffsetX 如何创建各种文本效果。改变偏移方向会极大地改变文本的视觉外观。
来源
在本文中，我们探索了用于在 HTML canvas 上创建水平阴影效果的 shadowOffsetX 属性。这些技术对于为 canvas 图形和文本添加深度和视觉趣味至关重要。
作者
列出 所有 JS Canvas 教程。