Canvas教程 Canvas tutorial

<canvas>是一个新的HTML元素，这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。右面的图象展示了一些<canvas>的应用示例，我们将会在此教程中看到他们的实现。

<canvas>最先在苹果公司(Apple)的Mac OS X Dashboard上被引入，而后被应用于Safari。基于Gecko1.8的浏览器，例如Firefox 1.5，也支持这个新元素。元素<canvas>是WhatWG Web applications 1.0也就是大家都知道的HTML 5标准规范的一部分。

在本教程中，我将试着讲述如何在你自己的网页中使用<canvas>元素。提供的示例应该会给你些清晰概念，即用<canvas>能做些什么的。这些示例也可作为你应用<canvas>的起点。

开始使用之前

用元素<canvas>并不难，只要你具有HTML和 JavaScript的基础知识。

如上所述，并不是所有现代浏览器都支持<canvas>元素，所以你需要 Firefox 1.5或更新版本、或者其他基于Gecko的浏览器例如Opera 9、或者最近版本的Safari才能看到所有示例的动作。

目录

• 基本用法
• 绘制图形
• 使用图像
• 应用风格和颜色
• 变型
• 组合
• 基本动画

参考

• Canvas topic page
• Drawing Graphics with Canvas
• Canvas 演示 - 游戏，应用程序,工具与教程
• Canvas 示例集
• interactive canvas tutorial