canvas、svg的区别

时间:2020-05-01

<canvas>是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.例如,它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画.

Canvas API 提供了一个通过JavaScript 和 HTML的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

 Canvas API主要聚焦于2D图形。而同样使用<canvas>元素的 WebGL API 则用于绘制硬件加速的2D和3D图形。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<canvas id="canvas"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    ctx.fillStyle = 'green';
    ctx.fillRect(10, 10, 150, 100);
</script>
</body>
</html>

可缩放矢量图形 (SVG) 是一个基于 XML 语法的 2D 矢量图形格式。

基于 XML 语法,您可以使用 CSS 指定 SVG 的样式,并使用 JavaScript 进行交互。 HTML5 现在允许将 SVG tags 直接嵌入到 HTML 文档中。

作为一种矢量图像格式,SVG 图形可以无限地扩展,这使其在 responsive design 中非常有用,因为您可以创建可缩放到任意屏幕大小的界面元素和图形。SVG 还提供了一组有用的工具,例如裁剪,遮罩,过滤器和动画。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /* As SVG does not provide a default visual style for links,
   it's considered best practice to add some */

        @namespace svg url(http://www.w3.org/2000/svg);

        /* Necessary to select only SVG <a> elements, and not also HTML’s.
           See warning below */

        svg|a:link, svg|a:visited {
            cursor: pointer;
        }

        svg|a text,
        text svg|a {
            fill: blue; /* Even for text, SVG uses fill over color */
            text-decoration: underline;
        }

        svg|a:hover, svg|a:active {
            outline: dotted 1px blue;
        }
    </style>
</head>
<body>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <!-- A link around a shape -->
    <a href="/docs/Web/SVG/Element/circle">
        <circle cx="50" cy="40" r="35"/>
    </a>

    <!-- A link around a text -->
    <a href="/docs/Web/SVG/Element/text">
        <text x="50" y="90" text-anchor="middle">
            &lt;circle&gt;
        </text>
    </a>
</svg>
</body>
</html>