<canvas>與<div>都是HTML中使用的元素，它們在網頁設計和開發中有著不同的作用。以下將詳細介紹這兩個元素的區別和用法。
<canvas>是HTML5新增的元素，用于在網頁中繪制圖形、動畫和其他可視化效果。與<div>不同，<canvas>并不是一個真正的圖形容器，它僅僅是一個用于繪制圖形的空白區域。我們可以利用JavaScript來操作<canvas>的API，繪制圖形、添加動畫效果等等。
下面通過幾個代碼案例來詳細說明<canvas>元素的用法。，我們可以創建一個簡單的繪圖，并給它添加一些樣式。代碼如下所示：

<canvas id="myCanvas" width="300" height="200"></canvas>
<br>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);
ctx.strokeStyle = "blue";
ctx.lineWidth = 5;
ctx.strokeRect(75, 75, 50, 50);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 200);
ctx.stroke();
ctx.closePath();
</script>

以上代碼創建了一個300像素寬、200像素高的<canvas>元素，并使用了getContext("2d")方法獲取了一個2D渲染上下文。通過ctx對象，我們可以使用一系列的繪圖方法來繪制矩形、直線等圖形。
另外，<canvas>也支持繪制圖像。我們可以加載一張圖片，并在<canvas>中顯示出來。代碼示例如下：

<canvas id="myCanvas" width="300" height="300"></canvas>
<br>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "image.jpg";
img.onload = function() {
ctx.drawImage(img, 0, 0);
};
</script>

以上代碼中，我們創建了一個300像素寬、300像素高的<canvas>元素，并通過ctx.drawImage()方法將圖片繪制在<canvas>上。
<div>元素是HTML中最基本的構建塊之一，用于在網頁中創建容器，可以用來包裹文本內容、圖像、表格和其他HTML元素。通過CSS樣式，我們可以控制<div>元素的位置、大小、背景等等。
下面通過一個例子來演示<div>元素的用法。代碼如下所示：

<div id="myDiv">
<p>這是一個<div>元素的示例</p>
<img src="image.jpg">
</div>
<br>
<style>
#myDiv {
width: 300px;
height: 300px;
background-color: yellow;
}
</style>

以上代碼中，我們創建了一個<div>元素，并通過id屬性設置了它的樣式。該<div>元素的背景色為黃色，寬度和高度都為300像素。
來說，<canvas>和<div>元素在網頁設計和開發中有著不同的功能。<canvas>更適用于繪制圖形、動畫和其他可視化效果，而<div>則用于創建容器，包裹其他HTML元素。根據實際需求，我們可以選擇合適的元素來實現所需的效果。