之前介绍了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(&