svg和canvas的区别你都知道嘛（不断完善中）

最新推荐文章于 2024-05-08 19:57:02 发布

学前端的枣仁

最新推荐文章于 2024-05-08 19:57:02 发布

阅读量270

点赞数 1

本文链接：https://blog.csdn.net/qq_41022872/article/details/103061328

版权

svg，canvas无疑是当下前端同学的必备技术，比如自己实现一个复杂的组件，就会使用svg和canvas。另外，当下比较流行的WebGL最终都会渲染在canvas标签中，所以有必要了解一下svg和canvas的区别，下面列了一张表格

属性	canvas	svg
图形类型	位图	矢量图
绘制图形	纯脚本（js）	使用xml格式（xml格式是对html的补充）
使用方法	通过ctx = domElement.getContext(“2d”)来获得操作句柄，然后使用ctx.fillRect (30, 30, 55, 50)等一系列操作来画图	和html类似，直接使用等标签来创建（和DDOM一样，也可以使用js来动态创建）
绑定事件	发生点击事件的时候，检查事件对象的位置，然后检查哪些图形覆盖了该位置（这个位置上有多个对象的时候，可能还需要增加一下Canvas内部的捕获和冒泡机制）	由于svg绘制出来的图形元素最终都是DOM节点，所以绑定事件是十分容易的
缩放比较	canvas由于是位图，在放大的时候，就会像图片一样，失真，出现马赛克的情况	svg是矢量图形，可以自由缩放，不会失真和锯齿

关注