Canvas怎么绘制出径向渐变的圆？

图形开发canvashtml5

在Canvas中绘制径向渐变（Radial Gradient）的圆，你需要使用CanvasRenderingContext2D对象的createRadialGradient()方法，这个方法会创建一个径向渐变对象，然后你可以将这个渐变对象应用到圆形或其他形状上。

以下是一个HTML文件的示例，展示了如何在Canvas上绘制一个带有径向渐变的圆：

示例效果与源代码：

运行效果

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
35
36
37
38
39
40
<!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>  
    // 获取canvas元素和绘图上下文  
    var canvas = document.getElementById('myCanvas');  
    var ctx = canvas.getContext('2d');  
  
    // 创建径向渐变  
    var gradient = ctx.createRadialGradient(  
        canvas.width / 2, canvas.height / 2, 0, // 渐变开始圆的圆心和半径  
        canvas.width / 2, canvas.height / 2, 100 // 渐变结束圆的圆心和半径  
    );  
  
    // 添加渐变颜色  
    gradient.addColorStop(0, 'red'); // 渐变开始颜色  
    gradient.addColorStop(1, 'gold'); // 渐变结束颜色  
  
    // 设置填充样式为渐变  
    ctx.fillStyle = gradient;  
  
    // 绘制圆形  
    ctx.beginPath();  
    ctx.arc(canvas.width / 2, canvas.height / 2, 100, 0, Math.PI * 2); // 圆心、半径、起始角度、结束角度  
    ctx.closePath();  
  
    // 填充圆形  
    ctx.fill();  
</script>  
  
</body>  
</html>

在这个示例中，我们首先通过document.getElementById获取到Canvas元素，并调用其getContext('2d')方法来获取绘图上下文。然后，我们使用createRadialGradient方法来创建一个径向渐变对象，指定了渐变的起始圆和结束圆的圆心和半径。接着，我们使用addColorStop方法向渐变中添加颜色，并指定了每种颜色在渐变中的位置（0表示开始位置，1表示结束位置）。然后，我们设置绘图上下文的fillStyle属性为创建的渐变对象。最后，我们使用arc方法绘制一个圆形，并使用fill方法填充这个圆形，填充样式就是我们之前设置的径向渐变。

上一篇：为什么使用html？

下一篇：在HTML中怎么绘制出表情符号？