|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
SVG 與 Canvas 的五大區(qū)別
作者:admin 時間:2022-8-10 16:53:29 瀏覽:HTML <svg> 元素是 SVG 圖形的容器。SVG 代表可縮放矢量圖形。SVG 可用于定義圖形，如框、圓、文本等。SVG 代表可縮放矢量圖形，是一種用于在 XML 中描述 2D 圖形和圖形應(yīng)用程序的語言，然后 XML 由 SVG 查看器呈現(xiàn)。大多數(shù)網(wǎng)絡(luò)瀏覽器都可以顯示 SVG，就像它們可以顯示 PNG、GIF 和 JPG 一樣。
HTML <canvas> 元素用于通過 JavaScript 繪制圖形。<canvas> 元素是圖形的容器。
下表顯示了 SVG 和 Canvas 的五大區(qū)別。
| SVG | Canvas |
|---|---|
| SVG 更具可擴(kuò)展性。因此，它能夠以任何尺寸以高分辨率打印。 | 畫布不可擴(kuò)展。因此，它不能以更高的分辨率打印。 |
| 使用更少的對象、更大的表面或兩者兼而有之，可以提高性能。 | 對象越多、表面越小或兩者兼而有之，性能會更好。 |
| 可以使用腳本和 CSS 修改 SVG 文件。 | Canvas 文件的更改只能通過腳本進(jìn)行。 |
| 出色的文本渲染能力。 | 文本渲染不理想。 |
| SVG 格式是基于矢量和基于形狀的。 | 畫布由像素組成并且是基于光柵的。 |
例子
SVG
你可以嘗試運(yùn)行以下代碼將可縮放矢量圖形 (SVG) 添加到網(wǎng)頁 。
<!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>
輸出
Canvas
你可以嘗試運(yùn)行以下代碼來學(xué)習(xí)如何使用 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>
輸出
相關(guān)文章
相關(guān)文章
x
- 站長推薦
