今天主要是複習 Canvas 部分, 所以就先來測試畫布功能. 書上講 Canvas 是 HTML5 標準中很早公佈的草案, 所以算是 "創黨元老" 之一, 源自於 Apple 公司的 David Hyatt 所提出的 HTML 延伸功能, 2004 年獲得 WHATWG 組織採納.
Canvas 標籤範例如下 :
<canvas id=canvas1 width=300 height=200>您的瀏覽器不支援畫布功能</canvas>
這裡要特別注意 :
- Canvas 一定要有關閉標籤 </canvas>
- Canvas 的寬度 width 與高度 height 若未指定, 其預設值為 width=300, height=150.
- <canvas> 與 </canvas> 之間的內容為保留給不支援 canvas 時之替代內容, 若瀏覽器有支援就不會顯示, 沒支援才會顯示.
- 一個網頁中可以有多個 canvas 元素, 以不同的 id 識別. 只有 canvas 標籤沒辦法繪圖, 那只是個容器, 在畫布上繪圖其實是靠 Javascript, 通常是利用 id 來取得 canvas 物件 (用 document 物件的 getElementById), 故每一個 canvas 元素都要給予一個 id.
- Canvas 元素預設無邊框與背景樣式, 因此在網頁中是不可見的, 無法顯現其區域, 必須利用 CSS 來設定其 border (邊框) 或 background-color (背景色) 樣式, 例如 :
canvas {border: 1px solid black;} 或
canvas {background-color: grey;}
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 標準還在制定中呢).
