HTML如何繪制圖形？canvas和SVG有什么區別？

網頁開發中繪制圖形主要有兩種方式：html5 canvas 和 svg。一、canvas 是基于像素的畫布，適合動態繪圖和高頻重繪場景，如游戲或實時圖像處理，但不支持直接操作圖形對象；二、svg 是基于矢量的圖形格式，支持交互、響應式設計和 dom 操作，適合需要高質量顯示和用戶交互的圖表或地圖；三、兩者關鍵區別在于類型、可訪問性、交互性和性能特點不同，canvas 適用于大量圖形渲染，svg 更適合結構化圖形與交互。選擇應根據項目需求決定。

在網頁開發中，繪制圖形主要可以通過兩種方式實現：使用 html5 的 元素或者使用 SVG（可縮放矢量圖形）。它們都能用來繪制圖形、動畫甚至復雜的可視化圖表，但底層原理和適用場景有明顯不同。

一、Canvas 是像素畫布，適合動態繪圖

就像是一塊空白的畫布，你需要通過 JavaScript 來在這塊畫布上“畫畫”。它本身不保留任何圖形信息，只是最終畫面的像素呈現。

特點：

立即學習“前端免費學習筆記（深入）”；

• 基于像素，適合做游戲、實時渲染、圖像處理等。
• 圖形一旦繪制完成就不再被瀏覽器記錄，不能直接操作某個圖形對象。
• 性能高，尤其適合大量圖形頻繁重繪的情況。

使用方法示例：

<canvas id="myCanvas" width="200" height="100"></canvas> <script>   const canvas = document.getElementById('myCanvas');   const ctx = canvas.getContext('2d');   ctx.fillStyle = '#FF0000';   ctx.fillRect(0, 0, 150, 75); // 繪制一個紅色矩形 </script>

如果你需要頻繁更新畫面，比如做一個小游戲，Canvas 更合適。

二、SVG 是矢量圖形，適合交互和響應式設計

SVG 是一種基于 xml 的矢量圖形格式。你可以用標簽直接定義圖形元素，比如圓形、矩形、路徑等，并且可以像操作 DOM 一樣操作這些圖形。

特點：

立即學習“前端免費學習筆記（深入）”；

• 基于矢量，放大不失真，適合圖標、圖表、地圖等需要高質量顯示的場景。
• 支持事件綁定，可以給每個圖形元素添加點擊、懸停等交互。
• 可以用 css 控制樣式，也可以用 JS 操作節點。

使用方法示例：

<svg width="200" height="100">   <rect x="0" y="0" width="150" height="75" fill="#FF0000" /> </svg>

如果你希望圖形可以交互、響應屏幕大小變化，或者需要與頁面其他部分集成得更緊密，SVG 是更好的選擇。

三、Canvas 和 SVG 的關鍵區別總結

舉個例子：如果要做一個天氣圖，數據點很多而且經常更新，Canvas 更高效；如果是做一個可點擊的地圖區域，SVG 更靈活。

基本上就這些。兩者各有優勢，選哪個要看你的項目需求。Canvas 更偏向“畫”，SVG 更偏向“結構+交互”，掌握基本用法后可以根據具體場景靈活選用。

以上就是HTML如何繪制圖形？canvas和SVG有什么