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 绘制边框时，会把之前的路径再次绘制一遍，叠加起来颜色就比原来深一些。

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

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

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