前面的章節已經将canvas的api大緻介紹完畢了，下面我們來制作一個自定義畫闆，進一步熟悉一下這些api的用法。
3.3.1 畫闆的建立
建立一個畫闆的步驟如下：
（1）當滑鼠按下的時候，開始描畫，此處需要加入滑鼠按下事件。
（2）當滑鼠彈起的時候，結束描畫，此處需要加入滑鼠彈起事件。
（3）在滑鼠按下并且移動的時候，在滑鼠經過的路徑上畫線，此處需要加入滑鼠移動事件。
代碼清單3-22實作了建立一個簡單畫闆的功能。
代碼清單 3-22
運作效果如圖3-38所示。
代碼清單3-22建立了一個黑色畫闆，當滑鼠在畫闆上移動時，随滑鼠的移動會畫出白色線條。
在代碼清單3-22中，下列代碼畫了一個黑色矩形區域，作為畫闆。
下面建立了3個變量，變量onoff用來控制滑鼠是否按下，隻有當滑鼠按下的時候才會開始繪圖。變量oldx、oldy表示滑鼠發生移動前的坐标。
下面設定畫筆的顔色為白色，線寬為4。
下面給canvas添加了滑鼠按下偵聽事件，當滑鼠按下的時候，會調用down函數。
下面給canvas添加了滑鼠彈起偵聽事件，當滑鼠彈起的時候，會調用up函數。
下面給canvas添加了滑鼠移動偵聽事件，當滑鼠在canvas上移動的時候，會持續調用draw函數。
下面看看up、down、draw 3個函數中的内容。
down函數是在滑鼠按下的時候調用的。當調用down函數的時候，會将onoff變量設定為true，表示開始繪圖，并給oldx、oldy賦予滑鼠目前位置的坐标值。
up函數是在滑鼠彈起的時候調用的。當調用up函數的時候，将onoff變量設定為false，表示結束繪圖。
draw函數是在滑鼠發生移動的時候不斷持續調用的。當調用draw函數的時候，首先判斷onoff變量的值，即判斷滑鼠是否處于按下狀态，如果滑鼠處于按下狀态，則開始畫線。
每次畫線時，需要确定線條的起始位置和結束位置，線條的起始位置就是坐标(oldx,oldy)，然後把目前滑鼠位置作為線條的結束位置，代碼如下所示：
接着，利用moveto和lineto畫線，代碼如下所示：
上面的代碼是畫一條從坐标(oldx,oldy)到坐标(newx,newy)的線段，并設定了線條的顔色、寬度和線帽的類型。
在此次繪制結束後，新的滑鼠位置将作為下一次畫線的起始位置，代碼如下所示：
上面的代碼已經實作了一個最簡單的畫闆功能。下面将其再完善一下，即加入按鈕操作改變畫筆顔色和線條寬度的功能。完整的代碼如代碼清單3-23所示。
代碼清單 3-23
運作效果如圖3-39所示。
在代碼清單3-23中：
下面的代碼加入了6個按鈕，并加入了單擊事件，當單擊不同按鈕的時候，就會相應地改變畫筆的顔色。
下面的代碼加入了3個按鈕，并加入了單擊事件，當單擊不同按鈕的時候，就會相應地改變線條的寬度。
3.3.2 canvas畫布的導出功能
在3.3.1節中我們建立了一個畫闆，這一節再來給畫闆添加圖檔導出功能，即複制canvas畫闆上的圖像，使其儲存為圖檔格式。
要将canvas畫闆儲存為圖檔格式，隻需要使用下面的方法即可：
現在可在頁面上建立一個< img >标簽，然後将複制的canvas内容用< img>表示出來。完整代碼如代碼清單3-24所示。
代碼清單 3-24
運作效果如圖3-40所示。
如果想要将圖檔儲存為圖檔檔案，還需要借助php或asp等工具，這裡就不做讨論了。