資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
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檢視器呈現。大多數網頁瀏覽器可以像顯示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年6月1日
9K+ 瀏覽量
廣告