首頁 >web前端 >html教學 >SVG和HTML5 Canvas有什麼區別？

SVG和HTML5 Canvas有什麼區別？

PHPz轉載: 2023-09-18 22:49:021195瀏覽

SVG和HTML5 Canvas之间有什么区别？

HTML

SVG	HTML 畫布
SVG 具有更好的可擴展性。因此可以在任何解析度下高品質列印	Canvas的擴充性較差。因此，它不適合以較高解析度進行列印
SVG 對於較少數量的物件或較大的表面。	Canvas 在較小的表面或較大數量的物件上提供更好的效能。
SVG可以透過腳本和CSS修改	畫布只能透過腳本修改
SVG 是基於向量並由形狀組成。	畫布基於光柵並由像素組成。

範例

您可以嘗試執行以下程式碼以將可縮放向量圖形(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(&#39;newCanvas&#39;);
         var ctx = c.getContext(&#39;2d&#39;);
         ctx.fillStyle = &#39;#7cce2b&#39;;
         ctx.fillRect(0,0,300,100);
      </script>
   </body>
</html>

以上是SVG和HTML5 Canvas有什麼區別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html5 css html xml 对象 canvas

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何在HTML中定義定義清單？下一篇：如何在HTML中定義定義清單？

看更多