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

上一篇介绍了 HTML5 中 Canvas 的路径，这篇将要介绍一下 Canvas 中的颜色及渐变。

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 中一致，因此颜色值没有特别需要注意的地方。

<canvas id="canvas" width="600" height="500"></canvas><script type="text/javascript">    var canvas = document.getElementById("canvas");    var ctx = canvas.getContext("2d");    // fill a rectangle whit sepecified fill style    function fillRect(color) {        ctx.fillStyle = color;        ctx.fillRect(0, 0, 150, 100);        ctx.font = "10pt Arial";        ctx.fillStyle = "white";        ctx.fillText(color, 6, 20);        ctx.translate(160, 0);    }    ctx.translate(0, 50);    // fill rect with color name    fillRect("green");    // fill rect with 0xAABBCC    fillRect("#AABBCC");    // fill rect with rgba(50, 100, 150, 0.5)    ctx.translate(0, -25);    fillRect("rgba(50,100,150,0.5)");        // fill another rect with rgba(150, 100, 50, 0.5)    ctx.translate(-110, 50);    fillRect("rgba(150, 100, 50, 0.5)");</script>[提示：你可先修改部分代码，再按运行]

注意，以上代码需要使用 Firefox 3.5 来查看，在 Firefox 3.0.x 中，Canvas 的 Context 对象不支持 fillText 方法，而我安装的 Chrome 2.0.174.0 对 translate 方法的实现有误。