<canvas>元素是HTML5中一個非常有趣和強大的功能，它允許我們使用JavaScript創建動態和交互性的圖形并在Web頁面上渲染。使用<canvas>元素，我們可以實現各種各樣的繪圖，包括畫線、填充顏色、繪制形狀等。除了這些基本功能外，<canvas>元素還可以與<div>元素相結合，通過合成<div>和<canvas>，我們可以創建更豐富和復雜的圖形和動畫效果。
下面我們使用幾個代碼案例來詳細解釋說明如何使用<div>和<canvas>進行合成。
代碼案例1：

html
<div style="position: relative;">
<canvas id="myCanvas" width="400" height="400" style="position: absolute; top: 0; left: 0;"></canvas>
<div style="position: absolute; top: 100px; left: 100px; background-color: red; width: 200px; height: 200px;"></div>
</div>

在這個案例中，我們創建了一個<div>元素和一個<canvas>元素，并將它們放在一個位置相對的<div>元素中。通過設置適當的樣式，我們可以使<canvas>元素覆蓋在<div>元素上方。這樣，我們可以在<canvas>元素上繪制圖形或渲染動畫，同時保持<div>元素的可見性。
代碼案例2：

html
<div style="position: relative;">
<canvas id="myCanvas" width="400" height="400" style="position: absolute; top: 0; left: 0;"></canvas>
<div style="position: absolute; top: 100px; left: 100px; background-color: red; width: 200px; height: 200px;"></div>
</div>
<br>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
<br>
  // 繪制矩形
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, canvas.width, canvas.height);
<br>
  // 繪制文本
ctx.fillStyle = 'white';
ctx.font = '30px Arial';
ctx.fillText('Hello, Canvas!', 50, 200);
</script>

這個案例中，我們在<canvas>元素上繪制了一個藍色的矩形，并在矩形內部繪制了白色的文本。通過將<canvas>元素和<div>元素合成在一起，我們可以創建一個有趣的圖形，其中<div>元素可以用作背景或其他圖形的一部分，而<canvas>元素則可以用來渲染動態效果或添加交互性。
代碼案例3：

html
<style>
#container {
position: relative;
width: 400px;
height: 400px;
}
<br>
  #canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
<br>
<div id="container">
<canvas id="canvas"></canvas>
</div>
<br>
<script>
const container = document.getElementById('container');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
<br>
  // 繪制圖形
ctx.fillStyle = 'green';
ctx.fillRect(100, 100, 200, 200);
<br>
  // 監聽鼠標移動事件
container.addEventListener('mousemove', (e) => {
const rect = container.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
<br>
    // 繪制圓形
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(x, y, 50, 0, 2 * Math.PI);
ctx.fill();
});
</script>

在這個案例中，我們創建了一個容器<div>元素來包含<canvas>元素，并設置了適當的CSS樣式。我們在<canvas>元素上繪制了一個綠色的矩形，并使用鼠標移動事件來實現交互效果。當鼠標在容器內移動時，我們清空<canvas>元素并在鼠標位置繪制一個紅色的圓形。通過合成<div>元素和<canvas>元素，我們可以實現交互性良好的動畫效果，為用戶提供更好的視覺體驗。
綜上所述，通過合成<div>和<canvas>元素，我們可以實現更豐富和復雜的圖形和動畫效果。無論是作為背景、交互元素，還是實現動態渲染，<canvas>和<div>的合成可以幫助我們創建出令人矚目的Web頁面。