談談SVG和Canvas，了解其概念與區別

618字
3分鐘
2024-08-02
- 技術

在前端開發中，我們有時需要處理圖形和動畫。為此，HTML5 提供了兩種主要技術：SVG 和 Canvas。本文將介紹它們的概念、區別，並通過程式碼示例來幫助你理解它們的不同之處。

什麼是SVG？

SVG（Scalable Vector Graphics）是一種基於XML的矢量圖形格式。它用於定義矢量圖形，具有可伸縮性，即使放大或縮小也不會失真。SVG 圖像由路徑、線條、文本等基本圖形組成，並且這些元素可以用DOM操作來改變。

SVG示例

1
<svg width="100" height="100">
2
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
3
</svg>

上面的程式碼繪製了一個紅色的圓形，具有黑色的邊框。這個圓的中心在座標(50, 50)，半徑為40。

什麼是Canvas？

Canvas 是HTML5中引入的用於繪製圖形的元素。它是一個像素級的繪圖表面，可以通過JavaScript進行圖形繪製操作。與SVG不同，Canvas更適合處理大量的像素操作，例如遊戲中的圖像渲染。

Canvas示例

1
<canvas id="myCanvas" width="100" height="100"></canvas>
2
<script>
3
  var canvas = document.getElementById("myCanvas");
4
  var ctx = canvas.getContext("2d");
5
  ctx.beginPath();
6
  ctx.arc(50, 50, 40, 0, 2 * Math.PI);
7
  ctx.fillStyle = "red";
8
  ctx.fill();
9
  ctx.lineWidth = 3;
10
  ctx.strokeStyle = "black";
11
  ctx.stroke();
12
</script>

在這個例子中，我們使用Canvas繪製了一個紅色填充的圓形，並且給它加上了黑色的邊框。

SVG與Canvas的區別

雖然SVG和Canvas都可以用於繪製圖形，但它們有著顯著的區別。以下是兩者的主要差異：

特性	SVG	Canvas
渲染方式	基於矢量圖形	基於像素
放大縮小	保持圖形質量，不失真	放大可能導致像素化
事件處理	支持DOM事件（點擊、懸停等）	不直接支持，需要手動計算
動畫	使用CSS和JavaScript進行動畫控制	通過JavaScript手動更新繪製
文件大小	通常較小	取決於圖像複雜度，可能較大
適用場景	圖表、圖形、地圖、圖標	遊戲、數據可視化、圖像處理