Canvas如何绘制渐变的圆形？

图形开发canvashtml5

在HTML的Canvas中，我们可以使用createRadialGradient()方法来创建一个径向渐变，然后使用fillRect()或fill()方法将这个渐变应用到某个形状上。以下是一个如何绘制一个渐变的圆的示例：

示例效果与源代码：

运行效果

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
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
window.onload = function() {
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    // 创建一个径向渐变
    var gradient = ctx.createRadialGradient(250, 200, 50, 250, 200, 200);
    // 添加颜色到渐变
    gradient.addColorStop(0, 'red');
    gradient.addColorStop(1, 'blue');

    // 使用渐变填充一个圆
    ctx.beginPath();
    ctx.arc(250, 200, 200, 0, Math.PI * 2); // 画一个圆，参数分别为：圆心x坐标，圆心y坐标，半径，起始角度，结束角度
    ctx.closePath();
    ctx.fillStyle = gradient; // 设置填充样式为刚才创建的渐变
    ctx.fill(); // 使用设置的样式填充形状
}
</script>

</body>
</html>

尝试一下 »

在这个例子中，我们首先创建了一个径向渐变，然后添加了两种颜色（红色和蓝色）。然后我们使用这个渐变来填充一个圆形。你可以改变颜色、位置和大小来创建不同的效果。

上一篇：倾斜的矩形如何绘制出来，求助Canvas代码？

下一篇：Canvas如何绘制渐变的圆形和文字？