Canvas怎么绘制出线性渐变的矩形？

图形开发canvashtml5

在Canvas中绘制带有线性渐变的矩形，你需要首先创建一个线性渐变对象，然后设置该渐变对象的颜色停止点，接着将该渐变对象设置为矩形的填充样式，最后绘制矩形。以下是一个HTML文件的示例，展示了如何完成这一操作：

示例效果与源代码：

运行效果

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
27
28
29
30
31
32
33
34
<!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="200"></canvas>

<script>
    // 获取canvas元素和绘图上下文
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    // 创建一个线性渐变对象
    // 参数：渐变开始的x, y坐标，渐变结束的x, y坐标
    var gradient = ctx.createLinearGradient(0, 0, 400, 0);

    // 设置渐变颜色及其位置
    gradient.addColorStop(0, 'red'); // 起始颜色
    gradient.addColorStop(1, 'blue'); // 终止颜色

    // 设置矩形的填充样式为线性渐变
    ctx.fillStyle = gradient;

    // 绘制矩形
    // 参数：矩形左上角的x, y坐标，矩形的宽度，矩形的高度
    ctx.fillRect(0, 0, 400, 200);
</script>

</body>
</html>

在这个示例中，我们首先通过getElementById获取了canvas元素，并使用getContext('2d')方法获取了2D渲染上下文。接着，我们使用createLinearGradient方法创建了一个从左上角（0, 0）到右上角（400, 0）的线性渐变对象。然后，我们使用addColorStop方法为这个渐变对象设置了起始颜色（红色）和终止颜色（蓝色）。

之后，我们将这个渐变对象设置为fillStyle属性，这样接下来绘制的形状就会使用这个渐变作为填充样式。最后，我们使用fillRect方法绘制了一个矩形，这个矩形的填充样式就是我们之前设置的线性渐变。

上一篇：怎么制作出漂亮的网页链接？

下一篇：html表格中colspan 和 rowspan表示什么？