Canvas 圆形渐变

迈不过友情╰ 2022-05-12 00:38 388阅读 0赞

**一 介绍**

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下是设置Canvas圆形渐变的方法：

createRadialGradient(x,y,r,x1,y1,r1) - 创建一个圆形渐变。

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。

** **

**二 代码**

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    	<title> 圆形渐变 </title>
    </head>
    <body>
    <h2> 圆形渐变 </h2>
    <canvas id="mc" width="400" height="280"
    	style="border:1px solid black"></canvas>
    <script type="text/javascript">
    	// 获取canvas元素对应的DOM对象
    	var canvas = document.getElementById('mc');
    	// 获取在canvas上绘图的CanvasRenderingContext2D对象
    	var ctx = canvas.getContext('2d');
    	ctx.save();
    	ctx.translate(30 , 20);
    	// 创建圆形渐变
    	lg = ctx.createRadialGradient(80, 40 , 5 , 80 , 40 , 60);
    	// 向圆形渐变上添加颜色
    	lg.addColorStop(0.2 , "#f00");
    	lg.addColorStop(0.5 , "#0f0");
    	lg.addColorStop(0.9 , "#00f");
    	// 设置使用圆形渐变作为填充颜色
    	ctx.fillStyle = lg;
    	// 填充一个矩形
    	ctx.fillRect(0 , 0 , 160 , 80);
    	// 恢复坐标系统
    	ctx.restore();
    	// 平移坐标系统
    	ctx.translate(280 , 160)
    	ctx.beginPath();
    	// 添加圆弧
    	ctx.arc(0 , 0  , 80 , 0 , Math.PI * 2 , true);
    	ctx.closePath();
    	ctx.lineWidth = 12;
    	// 再次创建圆形渐变
    	lg2 = ctx.createRadialGradient(0, 0 , 5 , 0 , 0 , 80);
    	// 向圆形渐变上添加颜色
    	lg2.addColorStop(0.1 , "#ff0");
    	lg2.addColorStop(0.4 , "#0ff");
    	lg2.addColorStop(0.8 , "#f0f");
    	// 设置使用圆形渐变作为填充颜色
    	ctx.fillStyle = lg2;
    	ctx.fill();
    </script>
    </body>
    </html>

**三 运行结果**

![2b2346b5-f3f4-3247-9078-4af30781374f.png][]

[2b2346b5-f3f4-3247-9078-4af30781374f.png]: /images/20220512/37058f0b09ad4a5c8d4477c43de17483.png