HTML5邊玩邊學（一）-畫布詳解

width="750">

#一、canvas>標籤 #Html5 引入了一個新的 標籤，這個標籤所代表的區域就好像一塊畫布，你的所有圖形繪製最後都要在這塊畫布上呈現。有了這個標籤，瀏覽器的圖形表現力被極大的提升，Flash 和SilverLight 有沒有感到威脅呢? 新聞連結：Google聲稱Chrome7瀏覽器將提速60倍 <canvas>标签的用法非常简单，如下： <canvas id="tutorial" width="150" height="150" style="background-color:red;"> 你的浏览器不支持 Canvas 标签</canvas>   標籤和普通的HTML 標籤沒有多大的區別，你可以設定它的寬度和高度，可以透過CSS 設定它的背景顏色、邊框樣式等等。你可以在 這裡 找到關於 標籤的更多內容。 標籤中間的內容是取代內容，如果使用者的瀏覽器不支援 標籤，這段內容就會被顯示出來；如果使用者的瀏覽器支援 標籤，則這段內容將被忽略。

#上面的 程式碼顯示效果如下：

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

二、渲染上下文Rendering Context

其實光有 標籤我們並不能作任何事情，玩過Windows 程式設計的同學都知道，在Windows 裡面繪圖先要得到一個設備上下文DC ,在 標籤上繪圖也需要先得到一個渲染上下文，我們的圖形並不是直接畫到屏幕上的，而是先畫到上下文(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邊玩邊學（一）-畫布詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！