使用HTML5 Canvas API

1、檢測瀏覽器支持狀況

在建立HTML5 canvas元素以前，首先要確保瀏覽器可以支持它。若是不支持，你就要爲那些古董級瀏覽器提供一些替代文字。

2、在頁面中加入canvas

在HTML頁面中插入canvas元素很是直觀。如：<canvas id="c" widht="300" height="225"></canvas>

canvas中不少用於設置樣式和外觀的函數不會直接修改canvas的展現結果。只有當對路徑應用繪製（stroke）或填充（fill）方法時，結果纔會顯示出來。不然，只有在顯示圖像、顯示文本或者繪製、填充和清除矩形框的時候，canvas纔會立刻更新。

getContext()：獲取使用canvas的類型。如：canvas.getContext('2d');

3、變換

瞭解變換最簡單的方法就是把它當成是介於開發人員發出的指令和canvas顯示結果之間的一個修正層（modificationlayer）。無論在開發中是否使用變換，修正層始終都是存在的。

修正——在繪製系統中的說法是變換——在應該用的時候能夠被順序應用、組合或者隨意修改。每一個繪製操做的結果顯示在canvas上以前都要通過修正層去作修正。

關於可重用代碼有限公有一條重要的建議：通常繪製都就從原點（座標系中的0，0點）開始，應用變換（縮放、平移、旋轉等），而後不斷修改代碼直至達到但願的效果。

摘自《HTML5高級程序設計》