HTML5邊玩邊學（1）畫布

一、標籤

html5 引入了乙個新的標籤，這個標籤所代表的區域就好象一塊畫布，你的所有圖形繪製最後都要在這塊畫布上呈現。有了這個標籤，瀏覽器的圖形表現力被極大的提公升，flash 和 silverlight 有沒有感到威脅呢?

標籤的用法非常簡單，如下：

code highlighting produced by actiprocodehighlighter (freeware)

-->

你的瀏覽器不支援canvas 標籤

標籤中間的內容是替換內容，如果使用者的瀏覽器不支援標籤，這段內容就會被顯示出來；如果使用者的瀏覽器支援標籤，則這段內容將被忽略。

上面的**顯示效果如下：

你的瀏覽器不支援canvas 標籤

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

二、渲染上下文rendering context

其實光有標籤我們並不能作任何事情，玩過 windows 程式設計的同學都知道，在 windows 裡面繪圖先要得到乙個裝置上下文 dc ,在標籤上繪圖也需要先得到乙個渲染上下文，我們的圖形並不是直接畫到螢幕上的，而是先畫到上下文(context)上，然後再重新整理到螢幕上面的。

題外話：為什麼要整出乙個「上下文」這麼複雜的概念呢？因為有了上下文物件，我們就可以讓各種不同的圖形裝置在我們眼裡面看起都是乙個樣，我們只需要專注於繪圖，其他的工作就讓作業系統和瀏覽器去操心吧，說白了就是把各式各樣的具體變成統一的抽象，從而減輕我們的負擔。

獲取上下文非常簡單，只需要如下兩行**：

code highlighting produced by actiprocodehighlighter (freeware)

-->var canvas =document.getelementbyid('tutorial');

var ctx = canvas.getcontext('2d');

首先獲取 canvas 物件，然後呼叫 canvas 物件的 getcontext 方法，這個方法目前只能傳入引數 "2d"，不久的將來他可能會支援引數 "3d"，你一定明白那意味著什麼，讓我們期待吧。

三、瀏覽器支援

除了在那些不支援的瀏覽器上顯示替用內容之外，我們還可以通過指令碼的方式來檢查瀏覽器是否支援 canvas ，方法很簡單，判斷 getcontext 函式是否存在即可，**如下：

code highlighting produced by actiprocodehighlighter (freeware)

-->var canvas =document.getelementbyid('tutorial');

if (canvas.getcontext) else {

alert("不支援標籤");

HTML5邊玩邊學（1） 畫布