HTML5 畫布 Canvas 測試

今天陪姐姐全民英檢複試, 地點在樹德家商, 可能是分很多場的關係, 感覺不像初試那麼多人. 複試第一場是對答, 第二場是作文, 一直到 12:30 才結束. 時間很長, 我就帶了幾本 HTML5 的書去看, 打算好好地測試一番. HTML5 的書我看了好幾本, 但都是像看小說那樣, 沒有動手做根本就是隔靴抓癢, 很快就會忘光光.
今天主要是複習 Canvas 部分, 所以就先來測試畫布功能. 書上講 Canvas 是 HTML5 標準中很早公佈的草案, 所以算是 "創黨元老" 之一, 源自於 Apple 公司的 David Hyatt 所提出的 HTML 延伸功能, 2004 年獲得 WHATWG 組織採納.
Canvas 標籤範例如下 :

<canvas id=canvas1 width=300 height=200>您的瀏覽器不支援畫布功能</canvas>

這裡要特別注意 :

1. Canvas 一定要有關閉標籤 </canvas>
2. Canvas 的寬度 width 與高度 height 若未指定, 其預設值為 width=300, height=150. 
3. <canvas> 與 </canvas> 之間的內容為保留給不支援 canvas 時之替代內容, 若瀏覽器有支援就不會顯示, 沒支援才會顯示.
4. 一個網頁中可以有多個 canvas 元素, 以不同的 id 識別. 只有 canvas 標籤沒辦法繪圖, 那只是個容器, 在畫布上繪圖其實是靠 Javascript, 通常是利用 id 來取得 canvas 物件 (用 document 物件的 getElementById), 故每一個 canvas 元素都要給予一個 id.
5. Canvas 元素預設無邊框與背景樣式, 因此在網頁中是不可見的, 無法顯現其區域, 必須利用 CSS 來設定其 border (邊框) 或 background-color (背景色) 樣式, 例如 :
   canvas {border: 1px solid black;} 或
   canvas {background-color: grey;}

在測試 HTML5 功能時, 為了單純起見, 我想暫時忘了 jQuery, 但又戒不掉好用的工廠函式 $ (是太愛錢了吧?), 同時為了將來 "沒有 jQuery 的 HTML5" 做好準備 (如果跟 "沒有江宜樺的行政院" 與 "沒有馬英九的總統府" 雷同, 那就是純屬雷同), 所以自製了幾個小函式來取代那又臭又長的 document.getElement(s)ByXXX :

function $i(id) {return document.getElementById(id);}
function $n(id) {return document.getElementsByName(name);}
function $c(id) {return document.getElementsByClass(className);}
function $t(id) {return document.getElementsByClass(tagName);}

這裡在 $ 後面多加一個字元, 目的是保留跟 jQuery 混合使用的機會, 不會跟 jQuery 的名稱空間相衝突. 因為最近使用 jQuery 的 .val() 與 .text() 操作 textarea 元素內容時發現有跳行問題, 但使用 Javascript 原生的 .value 去設定卻沒問題, 詳細原因待查 (但願是我眼花), 總之人生在世還真的不能忘本啊.

首先我們來測試一下 canvas 的屬性與樣式 :

測試範例 1 : http://tony1966.16mb.com/html5test/canvas_1.htm [看原始碼]

在範例一中, 我們放置了一個無預設尺寸的畫布, 後面跟了五個按鈕, 分別用來顯示其尺寸, 設定其邊框與背景色樣式, 以及變更其尺寸. 同時我們也給畫布本身安了個 click 事件, 只要在畫布上點一下, 畫布就回復到其預設值 (300x150, 無邊框與背景樣式). 
程式處理部份請看原始碼, 欲操作畫布, 必須取得畫布物件 :

var canvas=$i("canvas1");  或者 
var canvas=document.getElementById("canvas1"); 

要取得畫布的尺寸屬性就用 canvas.width 與 canvas.height. 尺寸也可以使用 CSS 的 width 與 height 來設定, 所以比較完整一點的 canvas 容器可以這麼寫 :

<canvas id=canvas1 width=300 height=200 style="border: 1px solid black;">
您的瀏覽器不支援畫布功能
</canvas>

或者是連尺寸也用 CSS 來設定 :

<canvas id=canvas1 style="width:400px; height:400px; border:1px solid blue;">
您的瀏覽器不支援畫布功能
</canvas>

接下來我們要開始在畫布上繪圖. 前面說了, 一個 canvas 元素只是個容器, 自己不會畫圖, 要在畫布上繪圖必須透過 Javascript 操控 canvas 內建的 Context 物件, 這個物件提供了繪製線條, 弧形, 文字等方法, Context 物件相當於是 canvas 裡面的一個繪圖程序 (Process), 而取得此物件的方式是呼叫 canvas 物件的 getContext() 方法, 傳入一個文字參數 "2d" :

var ctx=canvas.getContext("2d");

注意, 這 "2d" 一定要小寫 (記得 Javascript 很現實, 會分大小眼), 如果傳 "2D" 進去看看, 它也不會說語法有錯 (畢竟這只是參數, HTML5 的 3d 標準還在制定中呢).