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> 标签");  
    
    
}