画布元素-2D绘图-图形的渐变填充-前端-HTML5-书闪BookChips

108 - 画布元素 - 2D 绘图 - 图形的渐变填充

作者：

贺及楼

成为作者

更新日期：2025-02-27 12:21:55

HTML5 画布元素 - 2D 绘图 - 图形的渐变填充

在 HTML5 中，<canvas> 元素为我们提供了强大的 2D 绘图能力。其中，图形的渐变填充是为图形增添视觉效果的重要手段，它可以让图形更加生动和立体。本文将详细介绍如何在 HTML5 的 <canvas> 元素中使用 2D 绘图 API 进行图形的渐变填充。

什么是渐变填充

渐变填充是指在图形内部使用颜色的逐渐变化来填充，而不是单一的颜色。HTML5 的 <canvas> 支持两种类型的渐变：线性渐变和径向渐变。

线性渐变

线性渐变是指颜色沿着一条直线方向逐渐变化。例如，从左到右、从上到下或者对角线方向。

径向渐变

径向渐变是指颜色从一个中心点向外辐射状逐渐变化。

演示代码

线性渐变示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Linear Gradient Example</title>
</head>
<body>
    <canvas id="linearCanvas" width="400" height="200"></canvas>
    <script>
        // 获取 canvas 元素
        const linearCanvas = document.getElementById('linearCanvas');
        // 获取 2D 绘图上下文
        const linearCtx = linearCanvas.getContext('2d');
        // 创建线性渐变
        const linearGradient = linearCtx.createLinearGradient(0, 0, 400, 0);
        // 添加颜色停止点
        linearGradient.addColorStop(0, 'red');
        linearGradient.addColorStop(0.5, 'green');
        linearGradient.addColorStop(1, 'blue');
        // 使用渐变填充矩形
        linearCtx.fillStyle = linearGradient;
        linearCtx.fillRect(0, 0, 400, 200);
    </script>
</body>
</html>

代码解释

获取 <canvas> 元素和 2D 绘图上下文：通过 document.getElementById 获取 <canvas> 元素，然后使用 getContext('2d') 方法获取 2D 绘图上下文。
创建线性渐变：使用 createLinearGradient(x0, y0, x1, y1) 方法创建一个线性渐变对象，其中 (x0, y0) 是渐变的起始点，(x1, y1) 是渐变的结束点。
添加颜色停止点：使用 addColorStop(offset, color) 方法为渐变添加颜色停止点，offset 是一个 0 到 1 之间的数值，表示颜色停止点的位置，color 是颜色值。
使用渐变填充图形：将 fillStyle 属性设置为渐变对象，然后使用 fillRect 方法填充一个矩形。

径向渐变示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radial Gradient Example</title>
</head>
<body>
    <canvas id="radialCanvas" width="400" height="200"></canvas>
    <script>
        // 获取 canvas 元素
        const radialCanvas = document.getElementById('radialCanvas');
        // 获取 2D 绘图上下文
        const radialCtx = radialCanvas.getContext('2d');
        // 创建径向渐变
        const radialGradient = radialCtx.createRadialGradient(200, 100, 20, 200, 100, 100);
        // 添加颜色停止点
        radialGradient.addColorStop(0, 'yellow');
        radialGradient.addColorStop(1, 'purple');
        // 使用渐变填充圆形
        radialCtx.beginPath();
        radialCtx.arc(200, 100, 100, 0, 2 * Math.PI);
        radialCtx.fillStyle = radialGradient;
        radialCtx.fill();
    </script>
</body>
</html>

代码解释

获取 <canvas> 元素和 2D 绘图上下文：与线性渐变示例相同。
创建径向渐变：使用 createRadialGradient(x0, y0, r0, x1, y1, r1) 方法创建一个径向渐变对象，其中 (x0, y0) 是内圆的中心点，r0 是内圆的半径，(x1, y1) 是外圆的中心点，r1 是外圆的半径。
添加颜色停止点：与线性渐变示例相同。
使用渐变填充图形：使用 beginPath 方法开始一个新的路径，使用 arc 方法绘制一个圆形，将 fillStyle 属性设置为渐变对象，然后使用 fill 方法填充圆形。

总结

渐变类型	创建方法	参数说明
线性渐变	`createLinearGradient(x0, y0, x1, y1)`	`(x0, y0)`：渐变起始点，`(x1, y1)`：渐变结束点
径向渐变	`createRadialGradient(x0, y0, r0, x1, y1, r1)`	`(x0, y0)`：内圆中心点，`r0`：内圆半径，`(x1, y1)`：外圆中心点，`r1`：外圆半径

通过使用 HTML5 的 <canvas> 元素和 2D 绘图 API，我们可以轻松地创建线性渐变和径向渐变，并使用它们来填充各种图形，为网页增添丰富的视觉效果。希望本文对你有所帮助，快去尝试一下吧！