美女毛片视频亚洲男人一区二区三区 ,日韩欧美成人午夜福利

贊助商

分類目錄

贊助商

最新文章

详细介绍字体单位：em、ex、ch、rem等

字体单位是相对测量单位，是根据其他一些值计算的，可以动态变化。与字体相关的测量单...

11个示例详细介绍SVG stroke形状属性及如何用其制作动画

stroke-width设置形状的描边粗细，如果在 HTML 中，框架是从外边缘...

9款用SVG蒙版制作的图片转场/过渡动画（含教程）

本文给大家介绍10款用SVG蒙版制作的图片转场/过渡动画，并分析如何实现它们。

filter和backdrop-filter属性10大参数使用说明：blur()，drop-shadow()，opacity()等

CSS 数据类型<filter-function>代表可以改变输入图...

box-shadow最详细介绍：语法、参数、示例

CSS box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个...

drop-shadow() 语法、参数、示例、详解

drop-shadow() 是一个CSS 过滤器函数，其将投影效果应用于输入图像...

SVG实现的网页气泡动画效果

本文给大家介绍一个SVG实现的网页气泡动画效果。

搜索

技術(shù)頻道 - html技術(shù)

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 的五大區(qū)別。

SVG	Canvas
SVG 更具可擴展性。因此，它能夠以任何尺寸以高分辨率打印。	畫布不可擴展。因此，它不能以更高的分辨率打印。
使用更少的對象、更大的表面或兩者兼而有之，可以提高性能。	對象越多、表面越小或兩者兼而有之，性能會更好。
可以使用腳本和 CSS 修改 SVG 文件。	Canvas 文件的更改只能通過腳本進行。
出色的文本渲染能力。	文本渲染不理想。
SVG 格式是基于矢量和基于形狀的。	畫布由像素組成并且是基于光柵的。

例子

SVG

你可以嘗試運行以下代碼將可縮放矢量圖形 (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>

demo download

輸出

Canvas

你可以嘗試運行以下代碼來學(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>