近日在网上瞎逛，看到此站：（请用Firefox/Chrome/Safari/Opera观看，IE系列则出错…该看的一个都看不到），效果不错，而且不是flash，用firebug打开一看，只看到一个<canvas>标签，原来是HTML5的新元素。学习之……

本文翻译自：https://developer.mozilla.org/en/Canvas_tutorial，如果等不及我翻译下一篇，请移步此文查看。

基本特性
<canvas>是HTML5里面定义的一个新元素，你能够在此元素里绘画、嵌入图片并使用javaScript脚本产生一段动画。

<canvas>首次在Mac OS X中的Dashboard中被引入，之后又被苹果公司的Safari浏览器所支持，采用Gecko1.8+引擎的浏览器都支持此标签（译注：Safari及Chrome采用的Webkit引擎也支持此标签），在W3C标准中，<canvas>元素做为Web application 1.0标准的一部分被引入——同时，我们也称其为HTML5 。

本文档旨在指导你如何在你的HTML文档中使用<canvas>元素，并提供一些简明的实例以助您更好的理解它。

准备工作

在使用<canvas>之前，你需要了解一些基本的HTML及javaScript知识。

并且，请确保你使用的浏览器能正确的支持<canvas>标签，我们向你推荐Firefox 1.5+/Opera 9/Safari 3+/Chrome，无论如何，请不要在IE上调试包含<canvas>标签的代码。

--------------------------------------------------------------------------------

Hello，canvas
示例代码：

<canvas></canvas>它看起来很像<img>标签，不同的是它没有src和alt属性，它的height和width属性是可选的，你也可以在CSS属性里对其指定高宽度，但这样做的话，其内部绘入的图像可能因为缩放大小而扭曲，所以，如果你在<canvas>中绘入的图像看起来似乎有点不一样，请尝试在CSS属性里去掉高宽度，而在其HTML属性中指定。当你没有给<canvas>指定高宽度时，它将具有默认的宽度300px，高度150px的属性。（译注：经在Chrome和Safari中测试，不给高宽度时它们都把<canvas>渲染为300×150px大小，所以，这应该是W3C的一个指导标准，而非Firefox的私有特性。） 

如同绝大多数HTML标签，你也可以为其指定一个id属性来对它与其它元素进行区分。

<canvas>的表现看起来如同一个普通<img>标签（它也具有margin，border，background等），但这些属性不会影响到最终的绘画输出，本文后部的示例将有助你理解这一点。而如果没有为其定义任何属性的话，<canvas>看起来就如同一个透明的gif。

平稳退化

因为<canvas>还是一个较新的标签，所以在一些老的浏览器中它并不能被正常解析（译注：例如Firefox 1.5和全系列的IE——是的，包括IE8），我们需要做一些工作来平稳退化到这些老的浏览器——这非常简单，老的浏览器不支持<canvas>标签，它们将其忽略掉，而接着解析接下来的内容，这样，我们只需要<canvas>内提供一些替代的内容，如一些文字或者图片，这样，支持<canvas>的浏览器将忽略<canvas>内部的内容，而老的浏览器将忽略<canvas>，各取所需，皆大欢喜。