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

<div id="_mcePaste">&lt;canvas id="canvas" width="600" height="500"&gt;&lt;/canvas&gt;
&lt;script type="text/javascript"&gt;
    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)");
&lt;/script&gt;</div>

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

2. Canvas 中的渐变

WHATWG 的 Canvas 规范中规划了两种渐变模式，一种是线性渐变，另一种是径向渐变。如果需要在 Canvas 中使用渐变，首先要根据你所要创建的渐变模式来调用 Context 的相应方法来创建一个渐变对象，这个对象就是用来控制渐变的效果。

继续阅读 »

上一篇介绍了 HTML5 中 Canvas 的基本概念，这篇将要介绍一下 Canvas 中的基本图形。

图形的基础 – 路径

在 Canvas 中，所有基本图形都是以路径为基础的，也就是说，我们在调用 2dContext 的 lineTo、rect 等方法时，其实就是往已经的 context 路径集合中再添加一些路径点，在最后使用 fill 或 stroke 方法进行绘制时，都是依据这些路径点来进行填充或画线。

在每次开始绘制路径前，都应该使用 context.beginPath() 方法来告诉 Context 对象开始绘制一个新的路径，否则接下来绘制的路径会与之前绘制的路径叠加，在填充或画边框时就会出现问题。在绘制完成路径后，可以直接使用 context.closePath() 方法来关闭路径，或者手动关闭路径。另外，如果在填充时路径没有关闭，那么 Context 会自动调用 closePath 方法将路径关闭。

基本路径方法

1. beginPath, closePath

这两个方法在前面已经介绍过，分别用来通知 Context 开始一个新的路径和关闭当前的路径。

在 Canvas 中使用路径时，应该要保持一个良好的习惯，每次开始绘制路径前都要调用一次 beginPath 方法，否则画出来的效果难看不说，还会严重影响性能。

在下面这张图中，左边的图形在每次绘制矩形前都调用了一次 beginPath 来清除之前的路径并重新开始绘制新的路径，而后面的图形则就只在绘制所有图形前调用了一次 beginPath 来清除路径，因此，虽然这里是使用的边框色是 #666，但是右边的图形颜色比左边的深一些，因为每次使用 stroke 绘制边框时，会把之前的路径再次绘制一遍，叠加起来颜色就比原来深一些。

<div id="_mcePaste">&lt;canvas id="canvas" width="500" height="500"&gt;&lt;/canvas&gt;
&lt;script type="text/javascript"&gt;
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.strokeStyle = "#666";
    function useBeginPath() {
        for (var i = 0; i &lt; 5; ++i) {
            ctx.beginPath();
            ctx.rect(10 + i*20, 10 + i*20, 210 - i*40, 210 - i*40);
            ctx.stroke();
        }
    }
    function notUseBeginPath() {
        ctx.beginPath();
        for (var i = 0; i &lt; 5; ++i) {
            ctx.rect(240 + i*20, 10 + i*20, 210 - i*40, 210 - i*40);
            ctx.stroke();
        }
    }
    useBeginPath();
    notUseBeginPath();
&lt;/script&gt;</div>

在 Context 中路径数较少时，如果不考虑显示效果，性能上还可以接受，但是如果 Context 中的路径数很多时，在开始绘制新路径前不使用 beginPath 的话，因为每次绘制都要将之前的路径重新绘制一遍，这时性能会以指数下降。

因此，除非有特殊需要，每次开始绘制路径前都要调用 beginPath 来开始新路径。 继续阅读 »

什么是Canvas

<canvas> 是一个新的 HTML 元素，这个元素在 HTML5 中被定义。这个元素通常可以被用来在 HTML 页面中通过 JavaScript 进行绘制图形、合成图像等等操作，也可以用来做一些动画。当然，目前 HTML5 规范还在草稿阶段，正式发布也许要等到2010年，不过现在已经有不少浏览器已经支持了部分 HTML5 规范。目前支持 canvas 元素的浏览器有 Firefox 3+、Safari 4、Chrome 2.0+ 等，因此，在运行本页中的例子时，请确保你使用的是上述浏览器之一。

尽管在 Mozilla 已经有不少关于 Canvas 的教程，我还是决定把自己的学习过程记录下来。如果觉得我写的不够明白，那么你可以在参考资料中找到 Mozilla 网站上 Canvas 教程的链接。

另外，可以在这里找到一些有趣的 Canvas 示例。

开始使用 Canvas

使用 Canvas 很简单，与使用其他 HTML 元素一样，只需要在页面中添加一个 <canvas> 标签即可：

<canvas id="screen" width="400" height="400"></canvas>

当然，这样只是简单的创建了一个 Canvas 对象而已，并没有对它进行任何操作，这个时候的 canvas 元素看上去与 div 元素是没什么区别的，在页面上什么都看不出来：）

另外，canvas 元素的大小可以通过 width 与 height 属性来指定，这与 img 元素有点相似。

Canvas 的核心：Context

前面说到可以通过 JavaScript 来操作 Canvas 对象来进行绘制图形、合成图像等操作，这些操作并不是通过 Canvas 对象本身来进行的，而是通过 Canvas 对象的一个方法 getContext 获取 Canvas 操作上下文来进行。也就是说，在后面我们使用 Canvas 对象的过程中，都是与 Canvas 对象的 Context 打交道，而 Canvas 对象本身可以用来获取 Canvas 对象的大小等信息。

要获取 Canvas 对象的 Context 很简单，直接调用 canvas 元素的 getContext 方法即可，在调用的时候需要传递一个 Context 类型参数，目前可以用的并且是唯一可以用的类型值就是 2d：

<script type="text/javascript"><!--mce:0--></script>

Firefox 3.0.x 的尴尬

Firefox 3.0.x 虽然支持了 canvas 元素，但是并没有完全按照规范来实现，规范中的 fillText、measureText 两个方法在 Firefox 3.0.x 中被几个 Firefox 特有的方法代替，因此在 Firefox 3.0.x 中使用 Canvas 时需要先 fix 这个几个方法在不同浏览器中的差别。

继续阅读 »