使用 HTML5 canvas 进行 Web 绘图
简介:新的规范旨在帮助开发人员更轻松的编写出各类应用,以顺应当前
,云计算以及等技术的最新趋势。在得以广泛推广之前,开发人员通常使
用,等技术进行绘图操作,但这些基于的绘图语言声明式的绘图方式并
不能满足复杂绘图操作在性能上的需求,比如游戏所需要的像素级别的绘图能力。
元素的出现填补了这种不足,开发人员可以使用脚本语言在
中进行一系列基于命令的图形绘制操作,本文将通过讲解如何使用元素进行基本绘
图操作,以及完成简单的动画和用户交互任务,阐明在帮助构建图形类应用时
所能够提供的能力。更多 html5 相关信息请关注 html5 中国:hp://www.html5cn.org
背景介绍
中新引入的元素使得开发人员在无须借助任何第三方插件(如
,)的情况下,可以直接使用脚本在页面进行绘图。它首次
由苹果公司的框架引入实现,并成功运用在 浏览器中,读者在这里可以体验
到基于的精彩示例。目前,已成为规范中的事实性标准,并且已经被
!"#$%&' #$%&'(!)#$%&'*+%$%&等浏览器所支持。最近(本文撰写之时),
,也正式宣称将在其-$%版本之后,开始对元素进行支持。
基于的绘图填补了绘图的在复杂绘图操作,特别是性能方面的不足,可广泛应
用于.!/,0.1#.)等应用中。
基本绘图 API
在了解了什么是元素之后,是时候使用在页面上真正进行的绘图操作
了。实际上,单独的一个标记只是在页面中定义了一块矩形区域,并无特别之处,
开发人员只有配合使用脚本,才能够完成各种图形,线条,以及复杂的图形变换
操作,与基于来实现同样绘图效果来比较,绘图是一种像素级别的位图绘图技
术,而则是一种矢量绘图技术。正鉴于这种本质机理的不同,如何更快速高效的进行
渲染成为各主流执行引擎性能比拼的重要指标之一。目前,(!)的2'
!"的/!3以及 的4!等引擎都已经能够很好的满足二维绘图所需的必
要性能指标,虽然在运行一些基于的游戏时(56占用率还是相对较高,但我们有理
由相信随着4.和.等一系列硬件厂商的参与,硬件加速技术将大大提升应用
的性能。
在开始绘图之前,我们需要首先创建一个指定大小的,并为其指定一个/,方便在
脚本中获取该.*实例对象。声明一个节点的方式如下所示。
7/899:/89#%%9890%%9;
!'!:/!!<!($
71;
需要指明的是,由于无法保证所有用户使用的浏览器都能够支持元素,所以在目前
评论23