您的浏览器过于古老 & 陈旧。为了更好的访问体验, 请 升级你的浏览器
Ready 发布于2013年09月21日 11:21

原创 html5 canvas的基本绘图机制

39 次浏览 读完需要≈ 4 分钟

内容目录

注意:本文属于《html5 Canvas绘制图形入门详解》系列文章中的一部分。如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文。请点击上述链接以了解使用html5 canvas绘制图形的完整内容。

通过前文《html5 Canvas绘制图形入门详解》我们已经了解到,html5的canvas标签本身并不具备任何行为,其作用仅相当于在网页上铺了一块指定大小的画布。然后,我们需要在JavaScript中使用canvas及其附属对象提供的相关API才能在canvas这块画布上作画。

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

为了更好地理解canvas的基本绘图机制,建议你使用新的浏览器标签页查看《CanvasRenderingContext2D对象的主要属性和方法》,以便于配合本文的理解。

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

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

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

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

  • CodePlayer技术交流群1
  • CodePlayer技术交流群2

0 条评论

撰写评论