linearGrad.addColorStop(0.75, '#09C');
linearGrad.addColorStop(1.0, '#000');
效果图:
还有我们定义的渐变线是倾斜的，我们也可以定义成水平的或者垂直的。我们只要修改一下渐变线的终止坐标即可。看代码,做成水平的渐变色:
var linearGrad = context.createLinearGradient(0, 0, 800, 0); 效果图:
垂直的渐变色:
var linearGrad = context.createLinearGradient(0, 0, 800, 0); 效果图:
我们所做的不管倾斜的水平的还是垂直的，都是贯穿了整个画布，那如果我们的渐变线只指定到了画布的一部分会是什么效果呢？我们修改一下
var linearGrad = context.createLinearGradient(0, 0, 400, 300);效果图:
同理我们所创建的渐变线也可以超过这个画布的最大宽高。我们修改一下
var linearGrad = context.createLinearGradient(-200, -100, 1000, 800);效果图:
还有我们所绘制的填充的形状也不一定占满整个画布的。我们可以任意调整自己定义的形状。这个填充的形状会在我们定义的渐变线上找到合适的填充色进而填充出来。举个例子:
var linearGrad = context.createLinearGradient(-200, -100, 1000, 800);效果图:
径向渐变:与线性渐变的区别是，径向渐变定义的是一个放射状的渐变。而这个放射状的渐变是定义在两个同心圆的基础上。而不像线性渐变是定义在两点之间的。
径向渐变也是需要两步来完成。
第一步 : 使用一个新的函数createRadialGradient(x0,y0,r0,x1,y1,r1); 他有6个参数。前三个参数定义第一个圆环的坐标和半径，后三个参数定义第二个圆环的坐标和半径。整个径向渐变就发生在这两个圆之间。var radialGrad = context.createRadialGradient(x0,y0,r0,x1,y1,r1);
第二步 : 和线性渐变是一样的，就不过多介绍。radialGrad.addColorStop(stop,color);
