画布元素-2D绘图-图形的阴影效果-前端-HTML5-书闪BookChips

109 - 画布元素 - 2D 绘图 - 图形的阴影效果

作者：

贺及楼

成为作者

更新日期：2025-02-27 12:22:27

前端 - HTML5 《画布元素 - 2D 绘图 - 图形的阴影效果》

在 HTML5 中，<canvas> 元素为我们提供了强大的 2D 绘图能力，其中图形的阴影效果能够为绘制的图形增添立体感和真实感。本文将详细介绍如何在 HTML5 的 <canvas> 元素中实现 2D 绘图的阴影效果，并给出具体的演示代码。

1. `<canvas>` 元素简介

<canvas> 是 HTML5 新增的元素，用于在网页上绘制图形。它就像一块画布，我们可以使用 JavaScript 在上面进行各种绘图操作。要使用 <canvas> 元素，首先需要在 HTML 文件中创建一个 <canvas> 标签，然后通过 JavaScript 获取该元素的上下文对象，进而进行绘图操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 2D 绘图阴影效果</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
        // 获取 canvas 元素
        const canvas = document.getElementById('myCanvas');
        // 获取 2D 绘图上下文
        const ctx = canvas.getContext('2d');
    </script>
</body>
</html>

2. 阴影效果的属性

在 2D 绘图中，要实现阴影效果，需要使用以下几个属性：

属性	描述
`shadowColor`	阴影的颜色，可以是 CSS 颜色值，如 `'red'`、`'#FF0000'` 等。
`shadowBlur`	阴影的模糊程度，值越大，阴影越模糊。默认值为 0，表示没有模糊效果。
`shadowOffsetX`	阴影在 X 轴方向的偏移量，正值表示向右偏移，负值表示向左偏移。
`shadowOffsetY`	阴影在 Y 轴方向的偏移量，正值表示向下偏移，负值表示向上偏移。

3. 实现阴影效果的示例代码

下面的示例代码展示了如何在 <canvas> 上绘制一个带有阴影效果的矩形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 2D 绘图阴影效果</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        // 设置阴影属性
        ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 阴影颜色为半透明黑色
        ctx.shadowBlur = 10; // 阴影模糊程度为 10
        ctx.shadowOffsetX = 5; // 阴影在 X 轴方向向右偏移 5 个单位
        ctx.shadowOffsetY = 5; // 阴影在 Y 轴方向向下偏移 5 个单位
        // 绘制矩形
        ctx.fillStyle = 'blue';
        ctx.fillRect(50, 50, 200, 150);
    </script>
</body>
</html>

代码解释：

获取 <canvas> 元素和 2D 绘图上下文：通过 document.getElementById 方法获取 <canvas> 元素，然后使用 getContext('2d') 方法获取 2D 绘图上下文。
设置阴影属性：
- shadowColor 设置为 'rgba(0, 0, 0, 0.5)'，表示半透明的黑色阴影。
- shadowBlur 设置为 10，使阴影具有一定的模糊效果。
- shadowOffsetX 和 shadowOffsetY 分别设置为 5，使阴影向右下方偏移。
绘制矩形：使用 fillStyle 设置矩形的填充颜色为蓝色，然后使用 fillRect 方法绘制一个矩形。

4. 动态调整阴影效果

我们还可以通过 JavaScript 动态调整阴影效果，例如通过鼠标事件来改变阴影的偏移量。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态调整 Canvas 阴影效果</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        function draw() {
            // 清除画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            // 设置阴影属性
            ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
            ctx.shadowBlur = 10;
            ctx.shadowOffsetX = Math.random() * 20 - 10;
            ctx.shadowOffsetY = Math.random() * 20 - 10;
            // 绘制矩形
            ctx.fillStyle = 'green';
            ctx.fillRect(50, 50, 200, 150);
            // 每隔 100 毫秒重新绘制
            requestAnimationFrame(draw);
        }
        // 开始绘制
        draw();
    </script>
</body>
</html>

代码解释：

clearRect 方法用于清除画布上的所有内容。
Math.random() * 20 - 10 用于生成一个 -10 到 10 之间的随机数，作为阴影的偏移量。
requestAnimationFrame 方法用于每隔 100 毫秒重新调用 draw 函数，实现动态效果。

总结

通过使用 <canvas> 元素的 2D 绘图上下文的阴影属性，我们可以轻松地为绘制的图形添加阴影效果，增强图形的立体感和真实感。可以根据需要调整阴影的颜色、模糊程度和偏移量，还可以通过 JavaScript 实现动态的阴影效果。希望本文能帮助你更好地掌握 HTML5 中 2D 绘图的阴影效果。

109 - 画布元素 - 2D 绘图 - 图形的阴影效果

前端 - HTML5 《画布元素 - 2D 绘图 - 图形的阴影效果》

1. <canvas> 元素简介

2. 阴影效果的属性

3. 实现阴影效果的示例代码

代码解释：

4. 动态调整阴影效果

代码解释：

总结

1. `<canvas>` 元素简介