canvas与svg区别

摘要：什么是canvas？canvas画布，使用js在网页上绘制图像什么是svg？svg是可伸缩矢量图；canvas通过js在画布上画了连线，但是浏览器中没有展示连线DOM

一：定义

什么是canvas？

canvas画布，使用js在网页上绘制图像

什么是svg？

svg是可伸缩矢量图

二：使用

canvas使用

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.moveTo(10,10);
    cxt.lineTo(150,50);
    cxt.lineTo(10,50);
    cxt.stroke();
    c.addEventListener("mousedown", function(event){
        alert("hh")
    });
</script>

浏览器DOM展示

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
</canvas>

注意：

1.canvas通过js在画布上画了连线，但是浏览器中没有展示连线DOM
2.由于不是以DOM形式展示，canvas是一个整体，不能给画上图形添加事件，只能给canvas整体添加事件

svg使用

<!DOCTYPE html>
<html>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190" @click="svgClick">
      <polygon points="100,10 40,180 190,60 10,60 160,180" @click="domClick"
      style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
    </svg>
</body>
</html>

注意：

1.直接将svg元素嵌入html中，且在浏览器中展示的就是相对应的DOM节点
2.能给整个svg添加事件也可以给画的图形添加单独事件

三：区别

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_4568