Canvas 和 SVG 的区别是什么?

2,469 阅读1分钟

首先简单说一下Canvas

canvas是H5中新增的标签,官方解释说canvas是一块画布,可以在网页中绘制图像,话不多说,来个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
        在使用canvas时候,不可用css来定义canvas的宽度
        因为当画布缩放的同时,内部的图像也会随之缩放,这是就会出现图像失真的情况
        */
        canvas{
            background-color: #aaa;
        }
    </style>
</head>
<body>
    <canvas width="500" height="500">浏览器不支持canvas</canvas> //这就是canvas标签,当浏览器不支持canvas标签的时候就会在浏览器展示出浏览器不支持canvas这段话
    <script>
        var canvas = document.querySelector("canvas")
        //绘图环境
        var ctx = canvas.getContext("2d")
        function img(){
            //ctx.drawImage(图像对象,坐标,宽高)
            var imgObj = new Image() //new一个图像对象
            imgObj.src="./img.jpg"
            //在这里要注意,一点要在imgObj.onload内部再使用ctx.drawImage,否则会画图失败
            imgObj.onload = function (){
                ctx.drawImage(imgObj,100,100,300,300)
            }
            // ctx.drawImage(imgObj,100,100,300,300)
        }
        img()
    </script>
</body>
</html>

再了解一下svg

svg即可缩放矢量图形,什么是矢量图形呢,也就是放大或者缩小不会失真的图形。svg绘图时,每个图形都是以DOM节点的形式插入到页面中的,我们可以通过js来直接操作这些图形。

区别

  1. Canvas 主要是用笔刷来绘制 2D 图形的。
  2. SVG 主要是用标签来绘制不规则矢量图的。
  3. 相同点:都是主要用来画 2D 图形的。
  4. 不同点:Canvas 画的是位图,SVG 画的是矢量图。
  5. 不同点:SVG 节点过多时渲染慢,Canvas 性能更好一点,但写起来更复杂。
  6. 不同点:SVG 支持分层和事件,Canvas 不支持,但是可以用库实现。