<div>中的<canvas>元素可以用來在網頁中繪制圖形、動畫和其他視覺效果。Canvas 是 HTML5 提供的一個重要的標簽，它提供了一個跨瀏覽器的繪圖 API，并在 div 中使用。通過使用 JavaScript，我們可以在 <canvas> 元素內部繪制圖形和動畫效果，而不需要依賴其他插件或工具。下面是幾個關于在 <div> 中使用 <canvas> 的代碼案例，詳細說明如下。
第一個案例展示了如何在 <div> 中創建一個簡單的畫布并繪制一個矩形：

<div id="canvas-container">
<canvas id="canvas" width="200" height="200"></canvas>
</div>
<br>
<script>
// 獲取畫布元素和上下文對象
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
<br>
  // 繪制矩形
context.fillStyle = 'red';
context.fillRect(50, 50, 100, 100);
</script>

在這個案例中，我們通過獲取 id 為 "canvas" 的 <canvas> 元素來獲取畫布元素，然后通過 getContext() 方法獲取繪圖上下文對象。通過設置上下文對象的 fillStyle 屬性為 'red'，我們定義了矩形的填充顏色為紅色。使用 fillRect() 方法，我們繪制了一個位于坐標 (50, 50) 處，寬度為 100 像素，高度為 100 像素的紅色矩形。
第二個案例展示了如何在 <div> 中創建一個交互式的圖形，并在鼠標移動時繪制線條：

<div id="canvas-container">
<canvas id="canvas" width="500" height="300"></canvas>
</div>
<br>
<script>
// 獲取畫布元素和上下文對象
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
<br>
  // 定義初始線條顏色
let lineColor = 'blue';
<br>
  // 監聽鼠標移動事件
canvas.addEventListener('mousemove', function(event) {
// 獲取鼠標在畫布上的位置
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
<br>
    // 繪制線條
context.strokeStyle = lineColor;
context.lineTo(x, y);
context.stroke();
});
<br>
  // 監聽鼠標按下事件
canvas.addEventListener('mousedown', function(event) {
// 清空畫布
context.clearRect(0, 0, canvas.width, canvas.height);
<br>
    // 重置線條路徑
context.beginPath();
context.moveTo(event.clientX, event.clientY);
<br>
    // 設置新的線條顏色
lineColor = 'red';
});
<br>
  // 監聽鼠標松開事件
canvas.addEventListener('mouseup', function(event) {
// 設置新的線條顏色
lineColor = 'blue';
});
</script>

在這個案例中，我們通過監聽鼠標移動事件和鼠標按下/松開事件實現了一個簡單的圖形繪制應用。，我們在畫布上監聽鼠標移動事件，在每次移動時獲取鼠標在畫布上的位置，并通過 lineTo() 方法實時連接當前位置和上一個位置，并通過 stroke() 方法繪制線條。當鼠標按下時，我們清空畫布并重置線條路徑，并設置線條顏色為紅色。當鼠標松開時，我們將線條顏色恢復為藍色。
通過這幾個簡單的案例，我們可以看到在 <div> 中使用 <canvas> 可以方便地實現各種圖形和動畫效果，并且無需額外的插件或工具。<canvas> 元素不僅為開發者提供了一個強大的繪圖工具，同時也為用戶帶來了更加豐富和交互式的瀏覽體驗。