HTML5CanvasVIP专享

使用 HTML5 canv as 进行 Web 绘图 林 林, 软件工程师, IBM 简介： 新的 HTML5 规范旨在帮助开发人员更轻松的编写出各类 Web 应用，以顺应当前 SaaS，云计算以及 RIA 等技术的最新趋势。在 HTML5 得以广泛推广之前，开发人员通常使用 SVG，VML 等技术进行 Web 绘图操作，但这些基于 XML 的绘图语言声明式的绘图方式并不能满足复杂绘图操作在性能上的需求，比如 Web 游戏所需要的像素级别的绘图能力。HTML5 canv as 元素的出现填补了这种不足，开发人员可以使用 Jav aScript 脚本语言在 canv as 中进行一系列基于命令的图形绘制操作，本文将通过讲解如何使用 canv as 元素进行基本绘图操作，以及完成简单的动画和用户交互任务，阐明 canv as 在帮助构建 Web 图形类应用时所能够提供的能力。 标记本文！ 发布日期： 2010 年 12 月 30 日 级别： 中级 访问情况 9412 次浏览 建议： 0 (添加评论) 平均分 （共 27 个评分 ） 背景介绍 HTML5 中新引入的 canv as 元素使得 Web 开发人员在无须借助任何第三方插件（如 Flash，Silv erlight）的情况下，可以直接使用 Jav aScript 脚本在 Web 页面进行绘图。它首次由苹果公司的 Webkit 框架引入实现，并成功运用在 Safari 浏览器中，读者在 这里可以体验到基于 canv as 的精彩示例。目前，canv as 已成为 HTML5 规范中的事实性标准，并且已经被 Firefox 3.0+, Safari 3.0+, Chrome 3.0+, Opera10.0+ 等浏览器所支持。最近（本文撰写之时），IE 也正式宣称将在其 9.0 版本之后，开始对 canv as 元素进行支持。 基于 canv as 的绘图填补了 SVG 绘图的在复杂绘图操作，特别是性能方面的不足，可广泛应用于 Dashboard，2D/3D Game 等 Web 应用中。 回页首 基本绘图 AP I 在了解了什么是 canv as 元素之后，是时候使用 canv as 在 Web 页面上真正进行的绘图操作了。实际上，单独的一个 canv as 标记只是在页面中定义了一块矩形区域，并无特别之处，开发人员只有配合使用 Jav aScript 脚本，才能够完成各种图形，线条，以及复杂的图形变换操作，与基于 SVG 来实现同样绘图效果来比较，canv as 绘图是一种像素级别的位图绘图技术，而 SVG 则是一种矢量绘图技术。正鉴于这种本质机理的不同，如何更快速高效的进行 canv as 渲染成为各主流 Jav aScript 执行...