<canvas>是HTML5提供的一個用于繪制圖形的元素，可以用來制作動畫、繪制圖形等。在網頁開發中使用<canvas>元素可以利用JavaScript編寫代碼來繪制圖形，而<canvas>畫<div>是指通過使用<canvas>元素繪制一個<di>元素的形狀或內容。本文將通過幾個代碼案例詳細解釋<canvas>畫<div>的方法和效果。
，我們可以通過以下代碼來創建一個<canvas>元素，并設置其寬度和高度：

<code>
<canvas id="myCanvas" width="200" height="100"></canvas>
</code>

接下來，我們使用JavaScript來獲取帶有指定id的<canvas>元素，然后使用getContext()方法來獲得一個繪圖的上下文。通過這個上下文，我們可以使用多種方法來繪制圖形。
下面的代碼會在指定的<canvas>元素中繪制一個紅色的矩形：

<code>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.fillStyle = 'red';
context.fillRect(0, 0, 200, 100);
</code>

以上代碼中，我們獲取了id為"myCanvas"的<canvas>元素，并使用getContext('2d')方法來獲得2D上下文。接著，我們使用fillStyle屬性設置填充顏色為紅色，然后使用fillRect()方法繪制矩形。fillRect()方法的四個參數分別是矩形的起始點的x坐標、y坐標以及矩形的寬度和高度。
與填充矩形類似，我們也可以繪制圓形。以下代碼會在<canvas>元素中繪制一個藍色的圓：

<code>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.arc(100, 50, 30, 0, 2 * Math.PI, false);
context.fillStyle = 'blue';
context.fill();
context.lineWidth = 3;
context.strokeStyle = 'black';
context.stroke();
</code>

在這段代碼中，我們使用beginPath()方法來開始定義路徑，然后使用arc()方法來繪制一個圓。arc()方法的參數依次是圓心的x坐標、y坐標、半徑、起始角度、結束角度以及繪制方向（順時針或逆時針）。接下來，我們使用fillStyle屬性設置圓的填充顏色為藍色，并使用fill()方法填充圓。然后，我們使用lineWidth屬性設置線條的寬度，并使用strokeStyle屬性設置線條的顏色，最后使用stroke()方法繪制線條。
通過以上的代碼示例，我們可以看到通過<canvas>畫<div>是通過編寫JavaScript代碼來繪制圖形的。通過使用<canvas>元素和相關的繪圖方法，我們可以實現各種形狀和內容的繪制，從而靈活地展示和呈現網頁的內容。在實際開發中，我們可以根據需求使用不同的繪圖方法和屬性來實現豐富多樣的效果。