Canvas如何绘制一个带有渐变色的矩形？

图形开发canvashtml5

在HTML5的Canvas API中，绘制一个带有渐变色的矩形涉及到使用CanvasRenderingContext2D对象中的渐变（Gradient）功能。你可以创建线性渐变（createLinearGradient）或径向渐变（createRadialGradient），然后将其应用到矩形的填充或描边样式上。以下是一个使用线性渐变来绘制带渐变色的矩形的示例：

示例效果与源代码：

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="zh">
<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="300"></canvas>

    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // 创建一个线性渐变对象
        const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
        // 添加颜色停止点
        gradient.addColorStop(0, 'red');  // 起点颜色
        gradient.addColorStop(1, 'blue'); // 终点颜色

        // 使用渐变填充矩形
        ctx.fillStyle = gradient;
        ctx.fillRect(50, 50, 200, 100);
    </script>
</body>
</html>

尝试一下 »

解释：

在上面的代码中，我们首先获取了<canvas>元素的上下文，然后创建了一个线性渐变对象。线性渐变意味着颜色会沿着一条直线从一种颜色过渡到另一种颜色。我们使用createLinearGradient方法并传入渐变的起点和终点坐标来创建渐变对象。

接着，我们使用addColorStop方法添加颜色停止点，这些点定义了渐变的颜色。addColorStop接受两个参数：第一个是停止点的位置（0.0到1.0之间，0.0是起点，1.0是终点），第二个是停止点对应的颜色。

最后，我们将fillStyle设置为这个渐变对象，并使用fillRect方法绘制一个矩形。这个矩形将使用我们定义的渐变颜色进行填充。

在HTML文件的末尾，我们有一个隐藏的“尝试一下”按钮，通过JavaScript的openTry函数（该函数需要您自己实现或替换为适当的代码）可以打开另一个HTML页面，让用户尝试运行这段代码并看到效果。

上一篇：Canvas如何绘制一个带有阴影效果的文字？

下一篇：Canvas如何实现缓动动画？