svg和canvas的区别

svg定义

1.可伸缩的矢量图形
2.是基于xml进行绘制图形
3.svg放大或者改变尺寸情况下图形质量不会有损。
4.svg 绘制出来的每⼀个图形的元素都是独⽴的 DOM 节点,

canvas定义

1.h5新增属性
2.基于js进行绘制图形

两者区别

1、svg每个图形都可以看作是一个对象,如果对象属性发生变化,浏览器可自动重现图形。根据变化自动改变变化部分即可。canvas图形如果绘制完成,不会再得到浏览器的关注。如果图形位置改变,浏览器需要重新绘制。
2、canvas依赖分辨率,svg不依赖分辨率。
3、canvas不支持事件处理器,svg支持。Canvas 绘制的图像 都在Canvas这个画布里面,是Canvas的一部分,不能用js获取已经绘制好的图形元素。
SVG 的一个图形对应一个元素,所以我们可以像处理 DOM 元素一样,很容易地给 SVG 图形元素添加对应的鼠标事件,这也是SVG相较于Canvas的一个非常大的优点可以让图形的用户交互非常简单。
4、svg适用于大型渲染区域区域程序(比如谷歌地图),canvas适用于图像密集型游戏。

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值