Canvas使用渐变之-线性渐变详解

Posted 2020-07-29 黑白红尘

在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。?