html5canva绘制圆环填充效果,Canvas画图-一个比想象中更骚气的圆(渐变圆环)

之前介绍了Canvas画图基础，这篇介绍一下画一个带渐变效果的圆。

一个渐变的圆环

渐变色应用广泛，和圆环结合做进度条非常酷，今天我们就来画一个这样的圆环：

Canvas渐变

在Canvas画图基础中我们知道给canvas上色主要是ctx.fillStyle和ctx.strokeStyle方法，这里是圆环，所以主要讲strokeStyle方法，fillStyle方法也同样适用。

看一下上面那个圆，像把一个线性的渐变给『掰弯』成一个圆。Canvas中有线性渐变的支持，我们可以试一下：

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext('2d');

ctx.lineWidth = 7;

ctx.beginPath(); // 开一条新路

ctx.moveTo(170, 120);

var grd=ctx.createLinearGradient(0,0,170,0);

grd.addColorStop("0","black");

grd.addColorStop("0.3","magenta");

grd.addColorStop("0.5","blue");

grd.addColorStop(&