在canvas里面,除了使用纯色,我们还能把填充和笔触样式设置为渐变色:线性渐变和径向渐变。
线性渐变 createLinearGradient(x0,y0,x1,y1) 返回 CanvasGradient
四个参数分别是渐变色起始坐标x,起始坐标y,结束坐标x,结束坐标y。
渐变色沿着两点之间的一条线来进行渐变。
径向渐变 createRadialGradient(x0,y0,r0,x1,y1,r1) 返回CanvasGradient
六个参数分别是
起点圆心坐标(x0,y0)
起点圆心半径(r0)
终点圆心坐标(x1,y1)
终点圆心半径(r1)
这两种渐变方法都会返回一个 CanvasGradient对象,这个对象定义了addColorStop(position,color)的方法。
addColorStop() 给渐变的梯度线添加一种纯色, 返回void。
举例
1 var ctx = document.querySelector('canvas').getContext('2d'); 2 3 var grad = ctx.createLinearGradient(0,0,500,500); 4 5 grad.addColorStop(0,'green'); 6 7 grad.addColorStop(0.5,'yellow'); 8 9 grad.addColorStop(1,'blue');
注意,此时在画布上已经创建了一个矩形渐变范围,坐标是 0,0,500,500;
但并没有显示出来,此时需要我们再绘出一个别的形状--以矩形为例。
来选择我们要显示的渐变范围,这个重新绘出的矩形需要取grad的样式。
1 ctx.fillStyle = grad; 2 ctx.fillRect(x,y,w,h);
此时,也就是说我们接下来要画的矩形,使用了我们刚才创建的渐变色。
不难想象,我们预先配置好的渐变范围其实就是一个长宽各500的矩形,渐变方向
是从左上角到右下角。
但是,我们要把这个新绘制矩形的放在哪呢?
我们可以把我们配置好的500*500的渐变范围当一块地,上面被土掩盖了,下面是各种果实。你想看哪块的果实,你就把这个新矩形画在哪里。
你可以也画一个0,0,500,500的矩形,直接把整块地翻起来。
你也可以画一个0,0,50,50的矩形,只能看到左上角的绿色green,因为他渐变到yellow,或许是从50之后才开始的。
你也可以画一个450,450,50,50的矩形,那么你看到的将是右下角的blue。