Canvas簡介
傳統的網頁缺乏程式繪圖的功能，所以不能像VB或C#一樣用Bitmap，Graphics等物件畫出線條、形狀等等東西，最新版的HTML5語言新增了Canvas畫布物件，就可以使用JavaScript語言在上面繪製圖形，但是目前還有一點小小的不便，IE瀏覽器必須是最新的IE9才能支援，我們使用的Visual Web Developer 2008目前也還不認識HTML5所以會提示錯誤，但是實際執行網頁程式的其實是瀏覽器，所以只要是IE9就會正常執行，事實上其他常見的瀏覽器如Google的Chrome等等都更早就開始支援這項功能了！不想讓IE升級就下載其他瀏覽器吧！
請用VWD建立一個HTML網頁，在body區塊內寫原始碼如下，就可以建立一個300x300點，背景黃色的canvas物件：
※樣式表(style)的部分亦可使用Visual Studio軟體功能表的格式→新樣式產生之後，以class="style"的方式引用，結果原始碼應該類似這樣：
接下來請在head區塊內寫 JavaScript 程式如下，並在body的onload事件中啟動此副程式：
上述程式先用document.getElementById取得canvas物件的參考，再用getContext取得canvas的2d繪圖物件參考。與VB或C#繪圖比較，canvas比較像是Bitmap物件，Context在繪圖功能中就如同Graphysics物件了！畫線的語法是先用 moveTo移動焦點到畫線起點座標，再用 lineTo畫線，stroke是筆觸的意思，strokeStyle是筆的顏色，lineWidth是筆的粗細(單位是像素點)。最後是用stroke()執行繪圖。畫出來的畫面如下：
練習：當然如果要畫出連續的折線只要加入多幾個lineTo就可以了！請嘗試畫出一個階梯狀的圖樣！
範例二：畫方塊與線性漸層
改寫繪圖程式碼如下：
Rect是 Rectangle(矩形)的意思，strokeRecr表示畫矩形的框線，fillRecr就是填滿矩形，style基本上是指顏色，漸層也可以！作法是宣告漸層的起終點位置及顏色。上面程式會畫出一個空心、一個實心以及一個漸層的矩形，畫出效果如下：
練習：試試看畫出以下圖案：
多邊形就是使用moveTo與lineTo等指令連出一個區域，並加以填色，程式與執行結果如下：
在此也必須注意 beginPath 與 closePath 的意義，以上例來說，如果不寫這些指令最後出現的兩個三角形會都是紅色！因為fill方法會以為前面的所有路徑都要重畫，所以第二個fill指令會重畫包括第一個三角形！有了Path的起終點定義，fill就只會繪製之前設定的『一段』路徑了！這個很重要！不然就沒法在同一畫布畫出不同的顏色與筆觸了！
範例四：圓形與扇形：
寫繪圖程式如下：
arc就是圓弧的意思，需要定義的是圓心的x與y座標、半徑起始與終結的角度，最後的true或false表示是否為逆時針方向。fill舊式填滿前面的封閉曲線，也就是一個圓了！最後的stroke是描出框線。結果如下：
扇形程式及繪圖結果如下：
角度計算示意圖：
簡單說『角度』(方位角)的數值意義是固定的！如0.5PI是正下方。起(starting)終(ending)點角度說好之後，再說你要順時針(false)或逆時針轉(true)就可以正確定義弧線了！如上的粗黑弧線就是順時針畫出的，最後一個參數是false！
範例五：貼影像
畫布物件也可以貼上影像，首先將下列圖片加入你的網站：
(檔名為：bmed.gif)繪圖程式碼如下：
drawImage的第二與三參數(50,50)是影像左上角放在畫布上的座標。
如果寫成 c.drawImage(img, 50, 50, 100, 100)就是強制指定影像寬與高，可以縮放影像。
範例六：寫文字
畫布物件也可以寫文字，將以下程式碼加入：
範例五與六一起跑畫面如下：
