这一章讲解Canvas绘图中的线性渐变，不过呢，渐变的处理在各种浏览器中还略有不同，我们也会就这方面做一些说明。
什么是线性渐变
所谓线性渐变，是指从开始地点到结束地点，颜色呈直线的徐徐变化的效果。为了实现这种效果，我们绘制时必须制定开始和结束的颜色。而在Canvas中，不仅可以只指定开始和结尾的两点，中途的位置也能任意指定，所以可以实现各种奇妙的效果。
为了绘制线性渐变，我们需要使用createLinearGradient命令，这个命令可以获得一个CanvasGradient对象，使用这个对象的addColorStop方法添加颜色，就可以了。
|
1 2 3 4 5 6 7 |
CanvasGradient = ctx.createLinearGradient(x0, y0, x1, y1) 渐变的开始地点(x0, y0)，结束地点(x1, y1)指定后，返回线性渐变对象CanvasGradient。 然后我们通过addColorStop方法，offset为0的地方为开始地点的颜色，offset为1的则为结束地点的颜色。另外，很明显的，x0=x1并且y0=y1的时候，不会有渐变效果出现。 CanvasGradient.addColorStop(offset, color) 这个方法就是增加点的颜色，如果offset大于1或者小于0，会发生INDEX_SIZE_ERR异常；color可以是任何合法的CSS颜色，如果不是，则会发生SYNTAX_ERR异常。 如果offset是指定0到1之间的值，则是对应中间的比例位置。 |
整个的使用方法，首先是利用createLinearGradient方法指定渐变的首末位置得到CanvasGradient对象，再对这个对象使用addColorStop方法指定各个位置的颜色。最后，将CanvasGradient对象作为fillStyle使用。当然如果是希望框线使用渐变，就将其设置到strokeStyle上去。
纵方向的线性渐变
我们来看一个具体的例子：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
onload = function() { draw(); }; function draw() { var canvas = document.getElementById('c1'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); ctx.beginPath(); /* 指定渐变区域 */ var grad = ctx.createLinearGradient(0,0, 0,140); /* 指定几个颜色 */ grad.addColorStop(0,'rgb(192, 80, 77)'); // 红 grad.addColorStop(0.5,'rgb(155, 187, 89)'); // 绿 grad.addColorStop(1,'rgb(128, 100, 162)'); // 紫 /* 将这个渐变设置为fillStyle */ ctx.fillStyle = grad; /* 绘制矩形 */ ctx.rect(0,0, 140,140); ctx.fill(); // ctx.fillRect(0,0, 140,140); } |
画完以后是这个结果：
代码中的各个定义也很清楚，因为(0, 0, 0, 140)指定了一条垂直的线，所以最终效果是垂直的进行渐变，这个效果在各种浏览器中应该都是一样的。我们以前说到过，画矩形有个简便的fillRect方法，这个方法是rect方法和fill方法的组合，非常方便。这里之所以没有采用，是因为貌似在低版本的Safari下有问题（无视渐变的fillStyle，只用默认的颜色），但在最新（现在是5.2）版本下尝试过没问题了，估计很早就修复了，也就放心用吧。
水平方向的线性渐变
有了上面的基础，这个就非常简单了，只需要修改一句话就好了：
|
1 |
var grad = ctx.createLinearGradient(0,0, 140,0); |
实际的效果可想而知，如图所示。
倾斜的线性渐变
有了垂直方向和水平方向，也就一个倾斜的可以玩玩了，和上面一样，只是指定一下方向就可以了：
|
1 |
var grad = ctx.createLinearGradient(0, 0, 140, 140); |
还需要进一步说明么？如图所示。
这次的三个图可以在这里看到。
下一次讲解HTML5中的Canvas（径向渐变）。
大哥终于更新啦 (0^◇^0)/
nice
0.0