HTML5教程

当前位置: HTML5技术网 > HTML5教程 > 使用 HTML5 canvas 进行 Web 绘图

使用 HTML5 canvas 进行 Web 绘图

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


背景介绍

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

基于 canvas 的绘图填补了 SVG 绘图的在复杂绘图操作,特别是性能方面的不足,可广泛应用于 Dashboard,2D/3D Game 等 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 节点的方式如下所示。

 <canvas id="canvas" width="300" height="200"> 
 Fallback content, in case the browser does not support Canvas. 
 </canvas> 

【使用 HTML5 canvas 进行 Web 绘图】相关文章

1. 使用 HTML5 canvas 进行 Web 绘图

2. 浅谈如何使用HTML5的Canvas绘图

3. HTML Canvas绘图使用详解

4. HTML5 WebApp part4:使用 Web Workers 来加速您的移动 Web 应用程序(下) ...

5. HTML5 WebApp part4:使用 Web Workers 来加速您的移动 Web 应用程序(上) ...

6. HTML5开发之Canvas绘图之实战入门

7. Zrender——轻量级Canvas类库,让绘图大不同!

8. 使用原生 JavaScript 进行开发

9. 奇思妙想-用HTML5进行人脸识别

10. HTML5:在浏览器中进行沙丘 II游戏

本文来源:https://www.51html5.com/a580.html

点击展开全部

﹝使用 HTML5 canvas 进行 Web 绘图﹞相关内容

「使用 HTML5 canvas 进行 Web 绘图」相关专题