「1分钟--前端02」canvas和svg的区别

canvas和svg的区别

---

1.dom结构：

（1）canvas输出是一整块画布；

（2）Svg绘制的每一个图形元素都是独立的dom元素，方便事件绑定和修改

---

2.图形的属性：

（1）canvas输出标量画布，放大会失真；

（2）svg是矢量图片，放大不失真。

---

3.canvas和svg的图层点击事件：

（1）Svg很简单，每个独立的dom单独绑定事件即可；

（2）canvas麻烦点，使用isPointInPath方法，three用原生射线Raycaster对象的方法；

---

PS:前端程序员一枚，热爱分享web技术，新媒体音视频，航拍摄影知识；公众号“悬笔e绝”