點評:Html5 引入了一個新的標籤,這個標籤所代表的區域就好像一塊畫布,你的所有圖形繪製最後都要在這塊畫布上呈現。有了這個標籤,瀏覽器的圖形表現力被極大的提升,Flash 和SilverLight 有沒有感到威脅呢?
一、<canvas>標籤Html5 引入了一個新的<canvas> 標籤,這個標籤所代表的區域就好像一塊畫布,你的所有圖形繪製最後都要在這塊畫布上呈現。有了這個標籤,瀏覽器的圖形表現力被極大的提升,Flash 和SilverLight 有沒有感到威脅呢?
新聞鏈接:Google聲稱Chrome7瀏覽器將提速60倍
<canvas>標籤的用法非常簡單,如下:
<canvas>
你的瀏覽器不支持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 的繪圖功能演示一個上下移動的線條的例子, 具體的代碼將在後續內容中給出
你的瀏覽器不支持<canvas>標籤,請使用Chrome 瀏覽器或者FireFox 瀏覽器