DIV CSS 佈局教程網

本書第二章介紹Canvas。

一、簡介

1、歷史

Web之前有三種繪圖的方式，Adobe Flash，SVG和VML。此次Html5元素新添加的Canvas實際上是一個像素畫布（bitmap canvas），和SVG不同，畫在Canvas上的元素無法進行縮放，同時也不是DOM的一部分。 WHATWG的Html5選擇Canvas作為標准原因有二：1、由於不用存儲畫出的每一個元素，所以性能更好。2、和其他語言的二維繪圖API類似，更容易實現。

2、結構
Canvas在Html頁面中是一個“<canvas></canvas>”標簽，顯示為一個矩形區域。矩形區域的左上角為坐標原點(0,0)，向右為X軸，向下為Y軸。

3、檢測浏覽器支持

1. try {  
2. document.createElement(“canvas”).getContext(“2d”);  
3. document.getElementById(“support”).innerHtml =  
4. “Html5 Canvas is supported in your browser.”;  
5. } catch (e) {  
6. document.getElementById(“support”).innerHTML = “Html5 Canvas is not supported É  
7. in your browser.”;  
8. }  

4、失敗回退
對於不支持canvas的浏覽器，會顯示canvas標簽中間的備選文字。注意：還有兩點不足的地方，在canvas中繪制的圖片不能設置備選文字（text alternatives）。

5、浏覽器支持
除了IE其他浏覽器都支持，微軟承諾在IE9中會支持Canvas

二、使用方法
Canvas可以畫直線，弧線，支持各種線條樣式和使用純色或圖片填充，可以繪制文字和陰影等，API和一般語言的2D繪圖API類似，就不在重復摘抄了，可以參看Mozilla Developer Center上的的官方教程或者Opera的教程。

Canvas有兩點需要注意：
1、可以以像素的方式讀寫Canvas對象；
2、可以跨站在canvas中載入圖片，但是跨站載入的圖片不可以以像素的方式編輯。也就是說跨站載入的圖片可以顯示，但是不能讀取和復制。

本章的第二部分還介紹了一個使用Canvas元素的例子：HeatMap,，具體看附帶的源代碼。