[HTML5]canvas元素中beginPath()方法

在我初次接触canvas元素中的beginPath()方法时感到很不解，由此总在绘图前加上beginPath()方法，似乎这也是不错的。

但是理解beginPath()方法的机理也未尝不是坏事，下面我将结合网上搜寻的资料以及亲身试验，来讲述这个方法的用途。

首先我们先看一下画布绘图的过程是怎样的。一般来说，我们在画画之前，可以现在画纸上绘制出一幅草稿图，在完成之时我们才把图形描边出来和填充颜色上去，所以画布的绘图过程也不例外。但是在画布间的“草稿图”叫做路径。

在画布的绘图方法中，基本上都是描绘路径的方法，仅仅调用这些方法画布是不会显示图像的，它们的作用实质上是在绘制“草稿图”，即确定绘图路径。而要把草稿图呈现，我们需要调用方法stroke()描边或fill()方法填充图形，这就是画布的绘图过程了。

那么方法beginPath()其实就是告诉画布：“我要开始画草稿了，请把之前的草稿都清除掉。”是的，beginPath()是重新开始新路径，而把之前的路径都清空掉。如果路径没有了，那么我们的stroke()和fill()就无法起作用，我们看到下面一个例子：

var canvas = document.getElementById("myCanvas");var context = canvas.getContext("2d");context.beginPath();context.moveTo(50, 50);context.lineTo(250, 50);context.beginPath();context.moveTo(50, 100);context.lineTo(250, 100);context.stroke();

效果图如下所示：

我们在代码中绘制了两条直线，但是在调用stroke()以后，只有第二条直线绘制了出来。原因就是我们第二次调用方法beginPath()时清楚了第一条直线的路径，没有“草稿”我们无法描边。

下面我们再看到另外一个例子：

var canvas = document.getElementById("myCanvas");var context = canvas.getContext("2d");context.beginPath();context.strokeStyle = "yellow";context.moveTo(20, 50);context.lineTo(280, 50);context.stroke();context.strokeStyle = "red";context.moveTo(20, 100);context.lineTo(280, 100);context.stroke();

效果图如下所示：

图片中的颜色或许不太清楚，但是我们能看到第一条直线是橙色，第二条直线是红色。我们看回到代码，我们绘制的第一条线本应该是黄色（yellow）的，为什么会变成橙色了。其实那是因为红+黄=橙，我们第一次调用stroke()方法时绘制了第一条黄色直线，接下面我们没有调用beginPath()方法，于是第一条直线的路径保留着。然后我们添加了第二条直线的路径，又再提调用了一下stroke()方法，这一次描边的颜色是红色，画布再一次沿着第一条直线用红色描边，所以两次绘制的结果使到直线颜色变成了橙色。

因此通过上述的两个例子，我们应该清楚beginPath()方法的用途了。它主要用于清除之前的描绘路径，重新开始新的“草稿”，而stroke()和fill()方法只是单纯地把存在的路径描边或填充一遍，而不会清楚路径的。所以除非清楚知道自己在做什么，建议在调用stroke()或fill()方法后重新调用一次beginPath()方法，否则很可能会在同一个图形上绘制两遍。