canvas的基本绘图机制

html5的canvas标签本身并不具备任何行为，其作用仅相当于在网页上铺了一块指定大小的画布。然后，我们需要在JavaScript中使用canvas及其附属对象提供的相关API才能在canvas这块画布上作画。

 

在html5中，每一个canvas标签(画布)就对应JavaScript中的Canvas对象。Canvas对象本身也并不能直接用于绘画，毕竟，js中的Canvas对象是和html5中的canvas标签对应的，canvas标签只起到画布的作用，Canvas对象当然也只能被看作是一块画布。画布本身当然是不能绘制图形的。不过，js中的每一个Canvas对象都给我们提供了一支功能强大的画笔，只要我们使用这支画笔作画，就能够在对应的画布上显示出来。这支画笔就是CanvasRenderingContext2D对象。

 

要学会使用Canvas绘制图形，就必须了解Canvas的图形绘制过程。

 

使用Canvas绘制图形就像拿着画笔(相当于CanvasRenderingContext2D)画画一样。

例如，我们用画笔画一个三角形，首先就要拿着画笔移动到三角形的绘制起始点(相当于moveTo())，然后画一条到第2个点的直线线段(相当于lineTo())，接着再画一条到第3个点的直线线段(相当于lineTo())，最后画一条首尾相连的直线线段闭合这个三角形(相当于closePath())，这样一个三角形就画好了。

 

使用Canvas绘制图形的过程也与此类似。不同的是，在html5的canvas中，一个完整的绘画操作(例如上面的绘制三角形操作)被称之为「绘制路径」(简称「路径」)，其中每一个单独的绘画操作(例如绘制三角形的一条边)被称作子路径。

 

要开始绘制一个新的图形，就需要创建一个新的路径，也就是调用beginPath()方法。在内存中，路径是以一组子路径的形式存储的，它们共同构成一个图形。当我们每次调用beginPath()时，路径中现有的子路径就会被清空，从而存储新的路径以绘制新的图形。因此，我们绘制每个新的图形之前，都应该先调用beginPath()来清空原有的绘制路径。

 

在现实世界中，我们用画笔在画布上每涂抹一点，就可以立即在画布上看到效果，但html5 canvas并不是如此。因为，我们的所有绘画操作都是在内存中进行的，我们所有的涂抹操作(子路径)都会先统一存储在内存中。只有当我们确认一个图形的绘制路径完成之后，并下达「在画布上作画」的命令，此时，内存中的这一组子路径才会真正执行相应的绘画操作，最后在画布上显示对应的图形效果。