一：定义
  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添加事件也可以给画的图形添加单独事件
三：区别