canvas与svg区别
一：定义
- 什么是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添加事件也可以给画的图形添加单独事件
三：区别
四： d3与echarts区别
相关推荐
MIKUScallion 2020-07-05
jinxiutong 2020-02-10
jinxiutong 2020-02-03
mapaler 2020-07-17
Dickzeng 2020-07-05
wallowyou 2020-06-28
hermanncain 2020-06-25
mapaler 2020-06-21
Dickzeng 2020-06-17
程序员俱乐部 2020-06-11
lanzhusiyu 2020-06-09
hermanncain 2020-05-09
Elena0 2020-04-11
Leonwey 2020-04-11
wallowyou 2020-03-05
mqbeauty 2020-01-08
mapaler 2020-01-17
Elena0 2020-01-12
mapaler 2020-01-05