使用canvas进行画圆，并且设置圆环颜色渐变；中间的实心圆渐变。在使用的过程中，其实是发现createLinearGradient(x0,y0,x1,y1)方法时，根据改变x0,y0,x1,y1可以改变圆环颜色饱和度，所以写下这篇文章进行记录。下面是实现的结果图：
下面是具体的代码：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>使用canvas画同心渐变圆</title></head><body><canvas id="canvasEle"></canvas></body><script>// 圆环开始的位置的颜色var ringSartColor;// 圆环结束的位置的颜色var ringEndColor;// canvas标签的idvar canvasId;function initCanvas(canvasId,ringSartColor,ringEndColor){var myCanvas = document.getElementById(canvasId);var context = myCanvas.getContext("2d");// 通过修改中间的值可以改变圆中颜色的饱和度:圆环// createLinearGradient(x0,y0,x1,y1)；// 参数分别是渐变开始的x0、y0坐标；渐变结束点的x1、y1坐标// var ring = context.createLinearGradient(0,90,90,0);var ring = context.createLinearGradient(0,60,60,0);ring.addColorStop("0",ringSartColor);ring.addColorStop("1.0",ringEndColor);// 用渐变进行填充颜色context.strokeStyle = ring;// 设置圆环的宽度context.lineWidth = 10;// 绘画圆环context.beginPath();// 使用arc设置context.arc(x,y,r,sAngle,eAngle,counterclockwise);// x:圆的中心的x坐标；y:圆的中心的y坐标；r:圆的半径；// sAngle:起始角，以弧度计（弧的圆形的三点钟位置是 0 度）；// eAngle:结束角，以弧度计；// counterclockwise:可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。context.arc(74,74,60,0,Math.PI*2,false);// 设置圆环context.stroke();// 结束 画圆环context.closePath();// 中间的 圆 createRadialGradient(x0,y0,r0,x1,y1,r1)；// 渐变的开始圆的x0、y0、r0坐标半径；渐变的结束圆的x1、y1、z1坐标半径var round = context.createRadialGradient(74,74,5,74,74,40);round.addColorStop(0,"#FFF");round.addColorStop(1,"#4C4C4C");context.fillStyle = round;context.beginPath();// 上面已经描述清楚context.arc(74,74,48,0,2*Math.PI,true);// 实心圆context.fill();};// 画圆环 #1377ff #b042fe #C80000 #08e5ab #00a1f0 这些颜色可以自己尝试initCanvas("canvasEle","#2C2255","#08e5ab"); </script></html>
