帆布 - 渐变
梯度可用于填充矩形，圆形，线条，文字等在画布上的形状不限于纯色。
有两种不同类型的梯度的：
- createLinearGradient（ x,y,x1,y1 ） -创建的线性梯度
- createRadialGradient（ x,y,r,x1,y1,r1 ） -创建径向/环形梯度
一旦我们有一个渐变对象，我们必须添加两种或两种以上的颜色停止。
该addColorStop()方法指定颜色停止，其沿着渐变的位置。 梯度的位置可以是0到1之间的任何地方。
要使用渐变的填充样式或的StrokeStyle属性设置为渐变，然后绘制形状(rectangle, text, or a line) 。
使用createLinearGradient()
例
创建的线性梯度。 填充矩形与梯度：
JavaScript的：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80); 试一试» 使用createRadialGradient()
例
创建一个径向/圆形渐变。 填充矩形与梯度：
JavaScript的：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80); 试一试»