Canvas Gradient

canvas的渐变分两种：线性渐变和放射渐变。

线性渐变

先看 fill 的例子：

 

var gr = context.createLinearGradient(0, 0, 100, 0);
gr.addColorStop(0, 'rgb(255, 0, 0)');
gr.addColorStop(0.5, 'rgb(0, 255, 0)');
gr.addColorStop(1, 'rgb(0, 0, 255)');

context.fillStyle = gr;
context.fillRect(0, 0, 100, 100);
context.fillRect(0, 120, 50, 100);
context.fillRect(0, 240, 150, 100);

 
再看 stroke 的例子：

 

var gr = context.createLinearGradient(10, 10, 100, 10);
gr.addColorStop(0, 'rgb(255, 0, 0)');
gr.addColorStop(0.5, 'rgb(0, 255, 0)');
gr.addColorStop(1, 'rgb(0, 0, 255)');

context.lineWidth = 4;
context.strokeStyle = gr;
context.strokeRect(10, 10, 100, 100);
context.strokeRect(10, 130, 50, 100);
context.strokeRect(10, 250, 150, 100);

 

这两个例子有几点需要说明一下：

1. fill 的例子，矩形从(0, 0)开始画，因为 fill 不会被canvas隐藏，而 stroke 的例子，矩形从(10, 10)开始画，因为 stroke()绘制的path，它的lineWidth是沿着path两边对半分的，从(0, 0)开始画，会被隐藏掉一部分。

2. 渐变是基于位置的，比如context.createLinearGradient(0, 0, 100, 0); 它指定了一个水平的线性渐变，渐变的位置是从x = 0 到 x = 100这个范围，超过这个范围的区域，就是纯色。

渐变方向

关于方向，重点是createLinearGradient(x1, y1, x2, y2)方法的四个参数，表示渐变的开始点和结束点，所以渐变就是这两点之间的。

水平渐变：只要保证 y1 == y2 && x1 != x2 就行

垂直渐变：只要保证 x1 == x2 && y1 != y2 就行

其他方向可以根据点的位置自定义。

放射渐变

放射渐变要用到createRadialGradient(x1, y1, radius1, x2, y2, radius2)，也就是定义两个圆。

因此放射渐变又可分为两种：同心圆 和 非同心圆。

同心圆

 

var gr = context.createRadialGradient(100, 100, 25, 100, 100, 100);
gr.addColorStop(0, 'rgb(255, 0, 0)');
gr.addColorStop(0.5, 'rgb(0, 255, 0)');
gr.addColorStop(1, 'rgb(0, 0, 255)');

context.fillStyle = gr;
context.fillRect(0, 0, 200, 200);

非同心圆

 

var gr = context.createRadialGradient(50, 50, 25, 100, 100, 100);
gr.addColorStop(0, 'rgb(255, 0, 0)');
gr.addColorStop(0.5, 'rgb(0, 255, 0)');
gr.addColorStop(1, 'rgb(0, 0, 255)');

context.fillStyle = gr;
context.fillRect(0, 0, 200, 200);

可能你会搞不清这两个圆的位置，这里我把两个例子的stroke效果贴出来，如下：

　　　　　　

就这么看着，我个人觉得放射渐变位于两个圆之间的区域，应该是吧？啊哈