在當前的web前端技術中，JavaScript 是一種非常常用的腳本語言。它使用廣泛，可以實現各種各樣的功能。其中，圖形展示就是 JS 的一個重要應用場景之一。JS 提供了大量的圖形庫，用于實現各種精美、高效的圖形展示。在這篇文章中，我們將著重介紹 JavaScript 中的圖形應用。 Canvas 圖形 Canvas 是一個 HTML5 提供的一個允許將 JS 應用于圖形繪制的元素。相對于 SVG，Canvas 提供了更實時更迅速的圖形繪制能力。以下是一個基本的 Canvas 圖形繪制： ```javascript

``` 在這個例子中，我們通過 JS 獲取了 id 為 myCanvas 的 Canvas 元素，并創建了一個 2D 上下文 ctx。接下來，我們使用 fillRect() 方法繪制了一個寬度與高度分別為 150 和 75 的紅色矩形。通過這個例子可以看出，Canvas 圖形繪制主要集中在 2D 計算中。 SVG 圖形 SVG（Scalable Vector Graphics） 是一種可縮放矢量圖形語言，可以使用 XML 格式描述二維圖像。與 Canvas 不同，SVG 是一種類似 HTML 的標記語言。以下是一個基本的 SVG 圖形繪制： ```javascript

``` 在這個例子中，我們使用 SVG 繪制了一個半徑為 40 的黃色圓形，并使用綠色描邊繪制了它的邊界。SVG 圖形具有很好的可伸縮性和互操作性。 D3.js 數據驅動文檔 D3.js 是一種 JavaScript 庫，它可以用來處理文檔型數據，并將數據驅動的文檔組合成漂亮的圖表。D3 幾乎可以操作任何類型的文檔，能夠輕松地處理 SVG、HTML、Canvas 等各種類型。以下是一個基本的 D3.js 圖表繪制： ```javascript

``` 在這個例子中，我們使用 D3.js 繪制了一個根據數據集動態生成的矩形條圖。通過數據綁定，結合 enter()、append()、attr() 等方法，我們可以輕松地創建動態交互式圖表。 總結 在本文中，我們介紹了 JavaScript 中的圖形應用。Canvas 圖形提供了實時、高效的繪制能力；SVG 圖形提供了良好的可伸縮性和互操作性；D3.js 可以幫助我們處理文檔型數據，創建漂亮的圖表。它們各自擁有獨特的優點，可以滿足不同場景下的圖形需求。