<div> 和 <canvas> 是 HTML 中常用的標簽，用于網頁的布局和圖形展示。一些初學者可能會對這兩個標簽的作用和使用方法感到困惑。本文將詳細解釋和比較 <div> 和 <canvas> 標簽的功能和使用場景，并通過幾個代碼案例進行演示。

<span style="font-weight:bold">1. <div>標簽：</span>

<div> 標簽是 HTML 中最常用的塊級元素，用于布局和創建網頁的不同區域。它可以用來定義頁面的結構，使得元素可以被分組和樣式化。通過使用 <div> 標簽，我們可以輕松地將頁面分成不同的部分，如頁眉、導航欄、主內容區等。

下面是一個簡單的示例代碼：

<div>
<h1>這是一個頁面標題</h1>
<p>這是頁面的第一個段落</p>
<p>這是頁面的第二個段落</p>
</div>

在這個例子中，<div>標簽包含了一個頁面的標題和兩個段落。頁面可以通過 CSS 來美化和定位這些元素。

<span style="font-weight:bold">2. <canvas>標簽：</span>

<canvas> 標簽用于在網頁上繪制圖形和動畫。它提供了一種用于繪制 2D 和 3D 圖形的方法，比如畫圖、繪制圖表、創建動畫等。相較于 <div> 標簽，<canvas> 標簽更加靈活，可以根據 JavaScript 動態地繪制圖像。

下面是一個簡單的繪制方塊的示例：

<canvas id="myCanvas" width="200" height="200"></canvas>
<br>
    <script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);
</script>

在這個例子中，我們在 HTML 中創建了一個 id 為 "myCanvas" 的 <canvas> 標簽，然后通過 JavaScript 獲取了該標簽的上下文（context），并使用上下文的方法和屬性來繪制藍色的方塊。

來說，<div> 標簽用于布局和組織頁面的結構，而 <canvas> 標簽則提供了繪制圖形和創建動畫的功能。它們在網頁開發中有著不同的應用場景，且兩者可以結合使用。如在使用 <div> 標簽進行頁面布局時，可以在其中嵌入 <canvas> 標簽來實現動態的圖像展示。

參考文章例子：

<span style="font-weight:bold">Example 1:</span>

<div style="background-color: gray; width: 300px; height: 200px;">
<canvas id="myCanvas" width="200" height="100"></canvas>
</div>
<br>
    <script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(50, 25, 100, 50);
</script>

在這個例子中，我們創建了一個灰色背景的 <div> 標簽，并在其中嵌入了一個寬度為 200 像素、高度為 100 像素的 <canvas> 標簽。通過 JavaScript 繪制了一個藍色的長方形，該長方形位于 <canvas> 標簽的內部。

<span style="font-weight:bold">Example 2:</span>

<div style="width: 300px; height: 200px;">
<canvas id="myCanvas" width="200" height="100"></canvas>
</div>
<br>
    <script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.arc(100, 50, 40, 0, 2 * Math.PI);
ctx.lineWidth = 5;
ctx.strokeStyle = 'green';
ctx.stroke();
</script>

在這個例子中，我們創建了一個寬度為 200 像素、高度為 100 像素的 <canvas> 標簽，并在其中繪制了一個綠色的圓形。該圓形位于 <div> 標簽的內部。

通過以上示例，我們可以清楚地看到 <div> 和 <canvas> 標簽的不同用途和功能。使用 <div> 標簽可以方便地進行頁面布局，而使用 <canvas> 標簽可以在網頁上繪制圖形和創建動畫。開發者在實際應用中可以根據需求選擇合適的標簽來完成任務。