HTML5 Canvas 起步(3)-颜色与渐变

Canvas 中的基本颜色系统
在 Canvas 中，颜色主要用途就是在绘制路径时，用来指定填充颜色和边框颜色。
Canvas 中的颜色参数值有两种格式：
1. 如果透明度为 1.0，也就是不透明，颜色值的格式就与一般使用一样，为：#AABBCC，其中 AA、BB、CC 分别为 Red、Green、Blue 分量。
2. 如果透明度不为 1.0，也就是带透明，颜色值格式可以使用 rgba(r, g, b, a)，其中 r、g、b、a 分别为 Red、Green、Blue 分量和透明度。透明度的值为 0 至 1.0 之间的一个数值。
3. 颜色值还可以为已知的颜色名称，例如 red、blue、green 等。
总的说来，Canvas 中颜色值的格式与 CSS 中一致，因此颜色值没有特别需要注意的地方。




注意，以上代码需要使用 Firefox 3.5 来查看，在 Firefox 3.0.x 中，Canvas 的 Context 对象不支持 fillText 方法，而我安装的 Chrome 2.0.174.0 对 translate 方法的实现有误。
2. Canvas 中的渐变
WHATWG 的 Canvas 规范中规划了两种渐变模式，一种是线性渐变，另一种是径向渐变。如果需要在 Canvas 中使用渐变，首先要根据你所要创建的渐变模式来调用 Context 的相应方法来创建一个渐变对象，这个对象就是用来控制渐变的效果。
2.1 线性渐变
线性渐变使用 Canvas Context 的 createLinearGradient 方法创建，它的定义如下：
CanvasGradient createLinearGradient(in float x0, in float y0, in float x1, in float y1);
通过 (x0, y0) 与 (x1, y1) 指定渐变的开始位置与截止位置。当然，创建完线性渐变对象并不能完全开始使用渐变对象，你需要给它指定渐变的起始色以及终止色。CanvasGradient 对象有一个 addColorStop 方法用来添加颜色。
gradient.addColorStop(offset, color)
在线性渐变中，偏移量 offset 只能取 0 或 1，分别代表线性渐变的起始色和终止色。color 参数的值可以参考上面说明的颜色格式。
例如，我要创建一个从 (20, 20) 到 (150, 150) 的一个渐变，从绿色渐变到白色透明，就可以按照下面的代码来创建 CanvasGradient 对象：

• var gradient = ctx.createLinearGradient(20, 20, 150, 150);
• gradient.addColorStop(0, 'green');
• gradient.addColorStop(1, 'rgba(255,255,255,0)');

创建完渐变对象后，可以直接将它赋值给 CanvasContext 的 fillStyle 属性或 strokeStyle 属性，用来指定填充的渐变色或画边框的渐变色。也就是说，CanvasGradient 对象的用法等同于颜色参数值，通过赋值给 Context 对象来起作用。



2.2 径向渐变
与线性的用法类似，它的函数签名如下：
CanvasGradient createRadialGradient(in float x0, in float y0, in float r0, in float x1, in float y1, in float r1);
与线性渐变不同的是，径向渐变除了要指定起始位置和终止位置外，还需要指定起始半径和终止半径。使用不同中心点的径向渐变可以实现类似光照的效果，不过目前 Chrome 对不同中心点的径向渐变支持不好，在 Chrome 中只会使用第二个中心点进行径向渐变，测试发现在最新开发版 Chrome 3.0.184.0 (17842) 中仍是如此。
在下图中可以看到，主流支持 Canvas 的浏览器都能正确渲染中心点不同的径向渐变，而 Chrome 则只能使用第二个中心点进行渲染。



小结
总的来说，Canvas 中的颜色使用与使用 CSS 进行颜色定义没有什么区别，但比较强大的是 Canvas 支持渐变，这样就可以通过 Canvas 来做一些比较炫的效果。
这篇拖的太久了，已经有些忘了，先结束掉这部分再继续写了……