<div>元素和<canvas>元素都是HTML5中常用的標簽。它們都可以用來生成圖形，但在實現方式和功能上有所不同。div元素用來定義HTML文檔中的一個區域，可以用CSS樣式來控制其大小、位置和外觀等，同時可以在其中插入其他HTML元素。而<canvas>元素是HTML5新增的標簽，用于繪制圖形，可以通過JavaScript來操作和控制圖形的繪制過程。本文將介紹如何使用div和canvas元素生成圖形，并提供幾個代碼案例進行詳細說明。

，我們來看一個使用div元素生成圖形的案例。在下面的代碼中，我們創建了一個div元素，并使用CSS樣式設置其寬度、高度、背景色和邊框樣式。通過CSS的box-shadow屬性，我們還添加了一個陰影效果。這樣就生成了一個矩形的圖形。

<div style="width: 200px; height: 200px; background-color: #f00; border: 1px solid #000; box-shadow: 0 0 5px #000;"></div>

接下來，我們來看一個使用canvas元素生成圖形的案例。在下面的代碼中，我們創建了一個<canvas>元素，并使用JavaScript獲取其上下文對象。通過設置ctx對象的屬性和調用其方法，我們可以對畫布進行各種繪制操作。例如，下面的代碼演示了如何在畫布上繪制一個紅色的矩形。

<canvas id="myCanvas" width="200" height="200"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#f00";
ctx.fillRect(0, 0, 200, 200);
</script>

上述案例中，我們通過調用ctx對象的fillRect方法，在畫布上繪制了一個填充顏色為紅色的矩形。fillRect方法接受四個參數，分別是矩形左上角的橫坐標、縱坐標，以及矩形的寬度和高度。可以通過設置ctx對象的屬性來控制圖形的顏色、樣式和繪制方式等。

除了簡單的矩形，canvas元素還可以用來繪制各種其他形狀，例如直線、圓形、路徑等。以下是一個繪制圓形的示例代碼：

<canvas id="myCanvas" width="200" height="200"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fillStyle = "#f00";
ctx.fill();
</script>

上述代碼中，我們調用ctx對象的beginPath方法，開始繪制路徑。然后使用ctx.arc方法設置圓心的坐標、半徑、起始弧度和結束弧度，通過Math.PI可以獲取圓周率π。最后調用ctx對象的fill方法，填充圓形的顏色。通過設置不同的路徑和樣式，我們可以實現各種復雜的圖形效果。

綜上所述，div元素和canvas元素都可以用來生成圖形，但在實現方式和功能上有所不同。div元素是通過CSS樣式來控制圖形的外觀，而canvas元素則通過JavaScript來控制圖形的繪制過程。通過靈活運用這兩個元素，我們可以實現豐富多樣的圖形效果。