資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究SVG 和 HTML5 Canvas 之間有什麼區別？
HTML 的 <svg> 元素是 SVG 圖形的容器。SVG 代表可縮放向量圖形。SVG 可用於定義圖形，例如框、圓形、文字等。SVG 代表可縮放向量圖形，它是一種使用 XML 描述二維圖形和圖形應用程式的語言，然後由 SVG 檢視器呈現該 XML。大多數 Web 瀏覽器都可以像顯示 PNG、GIF 和 JPG 一樣顯示 SVG。
HTML 的 <canvas> 元素用於透過 JavaScript 繪製圖形。<canvas> 元素是圖形的容器。
| SVG | HTML Canvas |
|---|---|
| SVG 具有更好的可擴充套件性。因此，它可以以任何解析度高質量列印。 | Canvas 的可擴充套件性較差。因此，它不適合在更高解析度下列印。 |
| SVG 在物件數量較少或表面積較大的情況下具有更好的效能。 | Canvas 在表面積較小或物件數量較多的情況下具有更好的效能。 |
| SVG 可以透過指令碼和 CSS 進行修改。 | Canvas 只能透過指令碼進行修改。 |
| SVG 基於向量，由形狀組成。 | Canvas 基於光柵，由畫素組成。 |
示例
您可以嘗試執行以下程式碼，將可縮放向量圖形 (SVG) 新增到網頁中：
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>HTML5 SVG</title>
</head>
<body>
<h2 align = "center">HTML5 SVG Circle</h2>
<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
<circle id = "bluecircle" cx = "60" cy="60" r = "50" fill = "blue" />
</svg>
</body>
</html>示例
您可以嘗試執行以下程式碼，學習如何使用 HTML5 Canvas 繪製矩形：
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Tag</title>
</head>
<body>
<canvas id = "newCanvas" width = "200" height = "100" style = "border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById('newCanvas');
var ctx = c.getContext('2d');
ctx.fillStyle = '#7cce2b';
ctx.fillRect(0,0,300,100);
</script>
</body>
</html>
更新於: 2020-06-01
9K+ 瀏覽量
廣告