新特性帮助您从绘制简单图形到动画
使用一个简单的 HTML 元素 Canvas 来增强您的 web 页面。通过利用其灵活性和多样性吸引访客反复访问您的站点。
HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4。HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HTML 4.01 版本规范。它还引入了几个新元素和属性,它们适用许多使用 web 页面的领域 — 音频、视频、图形、数据存储、内容呈现,等等。本文主要关注图形方面的增强:canvas。
新的 HTML5 canvas 是一个原生 HTML 绘图簿,用于 JavaScript 代码,不使用第三方工具。跨所有 web 浏览器的完整 HTML5 支持还没有完成,但在新兴的支持中,canvas 已经可以在几乎所有现代浏览器上良好运行了,但 Windows® Internet Explorer® 除外。幸运的是,一个解决方案已经出现,将 Internet Explorer 也包含进来。
本质上,canvas 元素是一个白板,直到您在它上面 “绘制” 一些可视内容。与拥有各种画笔的艺术家不同,您使用不同的方法在 canvas 上作画。您甚至可以在 canvas 上创建并操作动画,这不是使用画笔和油彩所能够实现的。
本文探索新的 HTML canvas 元素,从简单地包含一个 canvas 元素到高级 JavaScript 交互(动画的关键)逐步进行演示。学习如何在一个 web 页面上显示 canvas。本文针对 web 设计师和开发人员,尽管 JavaScript 知识不是必须的,但理解该语言的运行方式将有所帮助。但是,HTML 知识是关键所在,尤其是如何创建一个基本 web 页面。
要查看本文展示的示例的实时实例,您需要一个浏览器并能访问 Internet。
具体教程:http://www.ibm.com/developerworks/cn/web/wa-html5canvas/