<canvas>是HTML5新增的一個元素，可以用來在網頁上繪制圖形、動畫、游戲等。它和<img>標簽一樣，都是空標簽，沒有閉合標簽。但是，<canvas>標簽可以使用JavaScript來繪制圖形，而<img>標簽只能展示預先繪制好的圖像。今天我們將介紹如何使用<canvas>元素來在網頁上繪制畫布，并使用JavaScript代碼來指定<canvas>元素的繪圖區域。，我們需要一個<canvas>標簽：

<code>
<p><canvas id="myCanvas" width="500" height="300"></canvas></p>
</code>

上面的代碼創建了一個id為"myCanvas"的<canvas>元素，并設置它的寬度為500像素，高度為300像素。這個<canvas>元素默認情況下不會顯示任何內容，需要使用JavaScript來指定繪圖區域。接下來我們就來看幾個具體的例子：
例1：繪制簡單的矩形 要繪制一個矩形，我們需要先獲取<canvas>元素的上下文對象，然后通過繪制命令來繪制矩形。下面的代碼演示了如何使用JavaScript來指定繪圖區域，并使用上下文對象繪制一個矩形：

<code>
<p>var canvas = document.getElementById("myCanvas");</p> 
<p>var ctx = canvas.getContext("2d");</p> 
<p>ctx.rect(20, 20, 150, 100);</p>
<p>ctx.fillStyle = "blue";</p>
<p>ctx.fill();</p>
</code>

上面的代碼通過獲取id為"myCanvas"的<canvas>元素，并獲取該元素的上下文對象ctx。然后，使用繪圖命令rect()指定矩形的位置和尺寸，再使用fillStyle屬性來設置矩形的填充顏色為藍色，最后調用fill()方法來繪制矩形并填充顏色。
例2：繪制文本 除了繪制圖形，<canvas>元素還可以繪制文本。下面的代碼演示了如何使用JavaScript來指定繪圖區域，并使用上下文對象繪制一段文本：

<code>
<p>var canvas = document.getElementById("myCanvas");</p> 
<p>var ctx = canvas.getContext("2d");</p> 
<p>ctx.font = "30px Arial";</p>
<p>ctx.fillText("Hello World", 50, 50);</p>
</code>

上面的代碼通過獲取id為"myCanvas"的<canvas>元素，并獲取該元素的上下文對象ctx。然后，使用font屬性來設置文本的字體和大小，再調用fillText()方法來繪制文本。這里繪制的文本內容是"Hello World"，位置為(50, 50)。
通過以上的例子，我們了解了如何使用<canvas>元素來在網頁上繪制畫布，并使用JavaScript代碼來指定繪圖區域。通過調用上下文對象的繪圖命令和屬性，我們可以繪制出豐富多樣的圖形和文本。有了<canvas>元素的強大功能，我們可以實現更加豐富、交互性更強的網頁應用。