Cavas的英文解釋是畫布，使用這個Html5的Canvas標籤可以建立畫布，結合JavaScript可以畫出很多圖形，我們先以畫一個藍色矩形為例，說明一下這個標籤的使用方法，
首先需要建立一個HTML5的網頁，方法是：
進入DW後，選擇：檔案-->新建
在彈出的對話方塊中選擇檔案型別為Html5
選擇“建立”後，即會形成一個空白網頁，選擇“檔案”--"儲存“
起名為：juxing
這個名字可以依據自己的喜好起，但最好名字與網頁內容相關，以後好找，另外一個需要注意的是，最好不用漢字。
我們將檢視切換為”程式碼“檢視
並將標題改為”畫出矩形“
標題也可以依據自己的喜好進行設定，並不影響網頁的執行。
Html是標記型語言，各種功能都需要在對應的標籤裡面才可以，所以我們首先需要新增標籤。
我們只需輸入<c，就會看到提示列表裡出現我們所需要的標籤canvas，按下回車鍵，即可完成輸入。
之後，我們每一次按下空格、或輸入相關字母，都會有提示列表，我們只需選擇所需的專案，按下回車即可，並不需要完整輸入字串，可以避免輸入時的拼寫錯誤。在本例中，只有引號內的”mycanvas“是需要完整輸入的，其他部分的關鍵字都可以透過提示列表進行輸入。
命令為：<canvas id="mycanvas" width="600" height="400"></canvas>
只有Canvas標記是不能直接畫出圖來的，需要配合JavaScript語言，首先需要寫出對應的程式標記。
Html語言中的標記都是成對出現的，我們為了避免錯誤，可以先將標記的起始、標記的結束寫好
寫好前後標記後，我們就可以在標記中使用JavaScript語言，呼叫Canvas標記，畫出我們所需要圖形了，方法是：
var canvas=document.getElementById('mycavas');
將變數canvas，賦值為我們之前在html中定義的畫布”mycanvas，以方便JavaScript呼叫
var ctxt=canvas.getContext('2d');
將變數 ctxt賦值為利用剛定義的“canvas”返回的二維繪圖環境物件，使用這個物件就可以繪圖了
使用fillStyle方法設定顏色，是十六進位制表示的三原色分量範圍是從“#000000”至“FFFFFF”
ctx.fillStyle='#0066cc';
我們將顏色設定為一種藍色，這個顏色也可以隨自己喜好 更改。
ctx.fillRect(50,50,400,200);
填充的起始位置設定為（50，50），矩形寬度為400，高度為200
選擇在瀏覽器中瀏覽後，即可看到我們所需要的矩形
Cavas的英文解釋是畫布，使用這個Html5的Canvas標籤可以建立畫布，結合JavaScript可以畫出很多圖形，我們先以畫一個藍色矩形為例，說明一下這個標籤的使用方法，
首先需要建立一個HTML5的網頁，方法是：
進入DW後，選擇：檔案-->新建
在彈出的對話方塊中選擇檔案型別為Html5
選擇“建立”後，即會形成一個空白網頁，選擇“檔案”--"儲存“
起名為：juxing
這個名字可以依據自己的喜好起，但最好名字與網頁內容相關，以後好找，另外一個需要注意的是，最好不用漢字。
我們將檢視切換為”程式碼“檢視
並將標題改為”畫出矩形“
標題也可以依據自己的喜好進行設定，並不影響網頁的執行。
Html是標記型語言，各種功能都需要在對應的標籤裡面才可以，所以我們首先需要新增標籤。
我們只需輸入<c，就會看到提示列表裡出現我們所需要的標籤canvas，按下回車鍵，即可完成輸入。
之後，我們每一次按下空格、或輸入相關字母，都會有提示列表，我們只需選擇所需的專案，按下回車即可，並不需要完整輸入字串，可以避免輸入時的拼寫錯誤。在本例中，只有引號內的”mycanvas“是需要完整輸入的，其他部分的關鍵字都可以透過提示列表進行輸入。
命令為：<canvas id="mycanvas" width="600" height="400"></canvas>
只有Canvas標記是不能直接畫出圖來的，需要配合JavaScript語言，首先需要寫出對應的程式標記。
Html語言中的標記都是成對出現的，我們為了避免錯誤，可以先將標記的起始、標記的結束寫好
寫好前後標記後，我們就可以在標記中使用JavaScript語言，呼叫Canvas標記，畫出我們所需要圖形了，方法是：
var canvas=document.getElementById('mycavas');
將變數canvas，賦值為我們之前在html中定義的畫布”mycanvas，以方便JavaScript呼叫
var ctxt=canvas.getContext('2d');
將變數 ctxt賦值為利用剛定義的“canvas”返回的二維繪圖環境物件，使用這個物件就可以繪圖了
使用fillStyle方法設定顏色，是十六進位制表示的三原色分量範圍是從“#000000”至“FFFFFF”
ctx.fillStyle='#0066cc';
我們將顏色設定為一種藍色，這個顏色也可以隨自己喜好 更改。
ctx.fillRect(50,50,400,200);
填充的起始位置設定為（50，50），矩形寬度為400，高度為200
選擇在瀏覽器中瀏覽後，即可看到我們所需要的矩形