使用 HTML5 canvas 进行 Web 绘图.doc

使用HTML5canvas进行Web绘图
简介：新的HTML5规范旨在帮助开发人员更轻松的编写出各类Web应用，以顺应当前SaaS，云计算以及RIA等技术的最新趋势。在HTML5得以广泛推广之前，开发人员通常使用SVG，VML等技术进行Web绘图操作，但这些基于XML的绘图语言声明式的绘图方式并不能满足复杂绘图操作在性能上的需求，比如Web游戏所需要的像素级别的绘图能力。HTML5canvas元素的出现填补了这种不足，开发人员可以使用JavaScript脚本语言在canvas中进行一系列基于命令的图形绘制操作，本文将通过讲解如何使用canvas元素进行基本绘图操作，以及完成简单的动画和用户交互任务，阐明canvas在帮助构建Web图形类应用时所能够提供的能力。更多html5相关信息请关注html5中国：HYPERLINK"http://www.html5cn.org"http://www.html5cn.org

背景介绍

HTML5中新引入的canvas元素使得Web开发人员在无须借助任何第三方插件（如Flash，Silverlight）的情况下，可以直接使用JavaScript脚本在Web页面进行绘图。它首次由苹果公司的Webkit框架引入实现，并成功运用在Safari浏览器中，读者在这里可以体验到基于canvas的精彩示例。目前，canvas已成为HTML5规范中的事实性标准，并且已经被Firefox3.0+,Safari3.0+,Chrome3.0+,Opera10.0+等浏览器所支持。最近（本文撰写之时），IE也正式宣称将在其9.0版本之后，开始对canvas元素进行支持。

基于canvas的绘图填补了SVG绘图的在复杂绘图操作，特别是性能方面的不足，可广泛应用于Dashboard，2D/3DGame等Web应用中。

基本绘图API

在了解了什么是canvas元素之后，是时候使用canvas在Web页面上真正进行的绘图操作了。实际上，单独的一个canvas标记只是在页面中定义了一块矩形区域，并无特别之处，开发人员只有配合使用JavaScript脚本，才能够完成各种图形，线条，以及复杂的图形变换操作，与基于SVG来实现同样绘图效果来比较，canvas绘图是一种像素级别的位图绘图技术，而SVG则是一种矢量绘图技术。正鉴于这种本质机理的不同，如何更快速高效的进行canvas渲染成为各主流JavaScript执行引擎性能比拼的重要指标之一。目前，Chrome的V8,Firefox的SpiderMonkey以及Safari的Nitro等引擎都已经能够很好的满足二维绘图所需的必要性能指标，虽然在运行一些基于canvas的游戏时CPU占用率还是相对较高，但我们有理由相信随着NVIDIA和AMD等一系列硬件厂商的参与，硬件加速技术将大大提升Web应用的性能。

在开始绘图之前，我们需要首先创建一个指定大小的canvas，并为其指定一个id，方便在JavaScript脚本中获取该DOM实例对象。声明一个canvas节点的方式如下所示。

<canvasid="canvas"width="300"height="200">
Fallbackcontent,incasethebrowserdoesnotsupportCanvas.
</canvas>

需要指明的是，由于无法保证所有用户使用的浏览器都能够支持canvas元素，所以在目前开发基于canvas的Web应用中需要增加“Fallbackcontent”，以提示用户他们无法正常体验此功能的原因或建议他们去下载最新的浏览器。

这里，好奇的读者可能会问，既然这是一个普通的DOM节点，那么便意味着可以通过直接改变其width或height属性值来改变canvas的大小？确实如此，但是，正如之前提到的canvas是一种像素级别的绘图方法，因而，一旦动态调整canvas的大小，canvas将被“重置”到一个新的初始状态，即便是如下这种操作，也会将canvas内的位图清除并将所有相关属性恢复到初始值的状态。当然，我们也可以把这当作重置canvas的小技巧来使用。

document.getElementById("canvas").width=document.getElementById("canvas").width;

简单图形绘制

基于canvas的绘图并不是直接在canvas标记所创建的绘图画面上进行各种绘图操作，而是依赖画面所提供的渲染上下文（RenderingContext），所有的绘图命令和属性都定义在渲染上下文当中。在通过canvasid获取相应的DOM对象之后首先要做的事情就是获取渲染上下文对象。渲染上下文与canvas一一对应，无论对同一canvas