HTML5邊玩邊學（1）：畫布

作者: 左洸來源: 博客園發布時間: 2010-09-25 14:20 閱讀: 5182 次推薦: 1 原文鏈接 [收藏]

　　一、<canvas>標簽

　　Html5 引入了一個新的<canvas> 標簽，這個標簽所代表的區域就好象一塊畫布，你的所有圖形繪制最后都要在這塊畫布上呈現。有了這個標簽，瀏覽器的圖形表現力被極大的提升，Flash 和 SilverLight 有沒有感到威脅呢?

　　<canvas>標簽的用法非常簡單，如下：

<canvas id="tutorial"width="150" height="150" style="background-color:red;">
你的瀏覽器不支持 Canvas 標簽
</canvas>

　　<canvas>標簽和普通的 HTML 標簽沒有多大的區別，你可以設置它的寬度和高度，可以通過 CSS 設置它的背景色、邊框樣式等等。你可以在這里找到關于<canvas> 標簽的更多內容。

　　標簽中間的內容是替換內容，如果用戶的瀏覽器不支持<canvas> 標簽，這段內容就會被顯示出來；如果用戶的瀏覽器支持<canvas> 標簽，則這段內容將被忽略。

　　上面的 <canvas> 代碼顯示效果如下：

你的瀏覽器不支持 Canvas 標簽

　　如果你用的是IE瀏覽器，可能只能看到一個提示；如果你用的是谷歌瀏覽器或者火狐瀏覽器，你就可以看到一個紅色的方塊區域。

　　二、渲染上下文 Rendering Context

　　其實光有 <canvas> 標簽我們并不能作任何事情，玩過 Windows 編程的同學都知道，在 Windows 里面繪圖先要得到一個設備上下文 DC ,在 <canvas> 標簽上繪圖也需要先得到一個渲染上下文，我們的圖形并不是直接畫到屏幕上的，而是先畫到上下文(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> 標簽");
}

　　四、一個小例子

　　下面將用 HTML5 的繪圖功能演示一個上下移動的線條的例子，具體的代碼將在后續內容中給出。

<p>
你的瀏覽器不支持 <canvas>標簽，請使用 Chrome 瀏覽器或者 FireFox 瀏覽器</p>
<script type="text/javascript">// <![CDATA[
var canvas = document.getElementById('move_line');
var ctx=canvas.getContext("2d");
//上下移動的直線
var width=400;
var height=200;
var y=0
var dir=1;
ctx.strokeStyle = "rgb(255,0,0)";

function draw(){
ctx.clearRect(0,0,width,height)
ctx.beginPath();
ctx.moveTo(0,y);
ctx.lineTo(width-1,y);
ctx.stroke();
y=y+dir;
if((y==0)||(y==(height-1))) dir=dir*(-1);
}
// ]]></script>
<p><input onclick="interval=setInterval(draw,10);" type="button" value="開始" /> <input onclick="clearInterval(interval);" type="button" value="停止" /> </p>