html中怎樣添加矩形標注？

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

選擇在瀏覽器中瀏覽后，即可看到我們所需要的矩形