分类： HTML5
2014-07-19 12:05:26
基本特性
是HTML5里面定义的一个新元素，你能够在此元素里绘画、嵌入图片并使用javaScript脚本产生一段动画。
首次在Mac OS X中的Dashboard中被引入，之后又被苹果公司的Safari浏览器所支持，采用Gecko1.8+引擎的浏览器都支持此标签(译注：Safari及Chrome采用的Webkit引擎也支持此标签)，在W3C标准中，元素做为Web application 1.0标准的一部分被引入——同时，我们也称其为HTML5 。
本文档旨在指导你如何在你的HTML文档中使用元素，并提供一些简明的实例以助您更好的理解它。
准备工作
在使用之前，你需要了解一些基本的HTML及Javascript知识。
并且，请确保你使用的浏览器能正确的支持标签，我们向你推荐Firefox 1.5+/Opera 9/Safari 3+/Chrome，无论如何，请不要在IE上调试包含标签的代码。
Hello，canvas
示例代码：
它看起来很像
标签，不同的是它没有src和alt属性，它的height和width属性是可选的，你也可以在CSS属性里对其指定高宽度，但这样做的话，其内部绘入的图像可能因为缩放大小而扭曲，所以，如果你在中绘入的图像看起来似乎有点不一样，请尝试在CSS属性里去掉高宽度，而在其HTML属性中指定。当你没有给指定高宽度时，它将具有默认的宽度300px，高度150px的属性。(译注：经在Chrome和Safari中测试，不给高宽度时它们都把渲染为300×150px大小，所以，这应该是W3C的一个指导标准，而非Firefox的私有特性。)
如同绝大多数HTML标签，你也可以为其指定一个id属性来对它与其它元素进行区分。
的表现看起来如同一个普通
标签(它也具有margin，border，background等)，但这些属性不会影响到最终的绘画输出，本文后部的示例将有助你理解这一点。而如果没有为其定义任何属性的话，看起来就如同一个透明的gif。
平稳退化
因为还是一个较新的标签，所以在一些老的浏览器中它并不能被正常解析(译注：例如Firefox 1.5和全系列的IE——是的，包括IE8)，我们需要做一些工作来平稳退化到这些老的浏览器——这非常简单，老的浏览器不支持标签，它们将其忽略掉，而接着解析接下来的内容，这样，我们只需要内提供一些替代的内容，如一些文字或者图片，这样，支持的浏览器将忽略内部的内容，而老的浏览器将忽略，各取所需，皆大欢喜。
代码示例：
//支持canvas的浏览器解析它
current stock PRice: $3.15 +0.15 //不支持canvas的浏览器解析它
//同上
必要的结尾
在Safari中，就像
标签一样被对待，所以结尾不是必需的，然而在一些老版本的Firefox上，是必需的，正确的写法是让成对的出现。
渲染方式
在浏览器中创建一个固定大小的具有一层或多层结构的平面(译注：你可以理解为N片大小相同的玻璃并在一起，你可以在每一片玻璃上画画)，目前可用的一些绘图方式都是基于2D平面的，在未来，也许可以增加一些3D的绘图方式，比如基于OpenGL ES的一些新特性。
浏览器刚载入时，它里面是空白的，接下来你可以利用javaScript脚本为其增加背景图片，或是在其上绘画。有一个标准的DOM方法：getContext ，用于引用内部的内容。getContext()有一个参数，用于指定其绘图的类型(2D或3D)。
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');检查浏览器是否支持
在上面的“平稳退化”部分我们在HTML中为不支持的浏览器准备了一部分不同的内容，同样，在javaScript中，我们也可以通过检查getContext方法，来确定浏览器是否支持，代码如下：
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// 为支持getContext的浏览器准备的内容
} else {
// 为不支持getContext的浏览器准备的内容
}一个基本的框架
下面是一个基本的使用的框架代码，接下来几章的一些实例我们将用到它，建议你下载此文件到你的计算机。
一个简单的实例
接下来我们以一个简单的实例结束此章：我们在中绘入两个矩形，其中一个具有50%的透明度。
