HTML5 的Drawing Path

理解绘制路径 Drawing Path

上 一篇文章中说过，我们绘制的图形是先绘制到一个抽象的上下文对象中（其实就是内存中），然后再将上下文对象输出到显示设备上，这个输出到显示设备的过程不 需要我们操心。但是有时候我们并不想立刻输出每一次绘制动作，也许我想让一组绘制动作完成以后，再集中一块输出， 比如一个围棋棋盘有19×19条直线组成，正常情况下需要向想显示设备输出19×19次，但是如果我们先暂停向显示设备输出，等在上下文中（内存中）全部 绘制完成19×19条直线时，再向显示设备输出，只需要输出一次就可以了。

这种情况在HTML5中叫做绘制路径，它由几个上下文对象的方法组成：

beginPath() ：开始路径，意思就是在你调用这个方法后，你绘制的图形就不会再向屏幕输出了，而只是画到了上下文对象中（内存中）

stroke() ：将你调用 beginPath 方法以后绘制的所有线条，一次性输出到显示设备上

closePath() ：如果你调用 beginPath 方法以后，在上下文对象中进行了一系列的绘制，但是得到的图形是不闭合的，这个方法将会帮你补上最后一条直线，将你的图形闭合起来。

注意：closePath并不向屏幕输出图形，而只是在上下文对象中补上一条线，这个步骤不是必需的。

fill() ：

如果你的绘制路径组成的图形是封闭的，这个方法将用 fillStyle 设置的颜色填充图形，然后立即向屏幕输出；

如果绘制路径不是封闭的，这个方法会先将图形闭合起来，然后再填充输出。