月度存档: 五月 2009

HTML5 Canvas 起步(2) – 路径

上一篇介绍了 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 来开始新路径。 继续阅读 »