乐趣区

canvas与svg区别

一:定义

  1. 什么是 canvas

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

  2. 什么是 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 添加事件也可以给画的图形添加单独事件

三:区别

退出移动版