当前位置: 首页 > 技术随笔 > html5 canvas的基本绘图机制

html5 canvas的基本绘图机制

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

3 0
我们认为: 用户的主要目的,是为了获取有用的信息,而不是来点击广告的。因此本站将竭力做好内容,并将广告和内容进行分离,确保所有广告不会影响到用户的正常阅读体验。用户仅凭个人意愿和兴趣爱好点击广告。
我们坚信:只有给用户带来价值,用户才会给我们以回报。
CodePlayer技术交流群1CodePlayer技术交流群1

帮朋友打一个硬广告:

P2P网贷系统(Java版本) 新年低价大促销,多年P2P技术积累,系统功能完善(可按需定制,可支持第三方存管、银行存管),架构稳定灵活、性能优异、二次开发快速简单。 另可提供二次开发、安装部署、售后维护、安全培训等一条龙服务。

外行看热闹,内行看门道。可以自信地认为,在系统设计上,比市面上的晓风、迪蒙、方维、绿麻雀、国融信、金和盛等P2P系统要好。
深圳地区支持自带技术人员现场考察源代码、了解主要技术架构,货比三家,再决定是否购买。

也可推荐他人购买,一旦完全成交,推荐人可获得实际售价 10% 的返现。
有意向者,详情请 点击这里 联系,工作时间立即回复。