HTML5特性 > Canvas >画布

一、<canvas>标签

<canvas>标签的用法非常简单，如下：

<canvas id="tutorial" width="150" height="150" style="background-color:red;"> 
你的浏览器不支持 Canvas 标签 
</canvas> 
二、渲染上下文 Rendering Context
获取上下文非常简单，只需要如下两行代码：
var canvas = document.getElementById('tutorial'); 
var ctx = canvas.getContext('2d'); 

首先获取 canvas 对象，然后调用 canvas 对象的 getContext 方法，这个方法目前只能传入参数 "2d"，不久的将来他可能会支持参数 "3d"，你一定明白那意味着什么，让我们期待吧。
getContext 方法返回一个 CanvasRenderingContext2D 对象 ，即渲染上下文对象，你可以在 这里 找到关于它的更多内容，都是一些绘图方法。
三、浏览器支持
除了在那些不支持的浏览器上显示替用内容之外，我们还可以通过脚本的方式来检查浏览器是否支持 canvas ，方法很简单，判断 getContext 函数是否存在即可，代码如下：
var canvas = document.getElementById('tutorial');  
if (canvas.getContext){  
   alert("支持 <canvas> 标签");  
} else {  
   alert("不支持 <canvas> 标签");  
}