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并不是如此。因为,我们的所有绘画操作都是在内存中进行的,我们所有的涂抹操作(子路径)都会先统一存储在内存中。只有当我们确认一个图形的绘制路径完成之后,并下达「在画布上作画」的命令,此时,内存中的这一组子路径才会真正执行相应的绘画操作,最后在画布上显示对应的图形效果。

相关推荐