canvas与svg特性和使用对比

两者比较一览

Canvas Svg
基于像素的(动态png) 基于形状的
单个html元素 多种多样的形状dom元素
只能通过script修改 script和css都可以修改
事件模型和用户交互需要使用像素(x, y) 事件模型和用户交互抽象到元素(rect, path)
绘图面积小或者对象大于10k时性也能很好 绘图面积很大或者对象小于10k的时候性能很好

性能对比曲线图

canvas vs svg 性能(来源microsoft开发社区)

使用场景举例

  • svg
    1.静态图像
    2.高保真文档(用于展示和打印)
  • canvas
    1.处理视频
    2.复杂场景、实时复杂数学动画
    3.基于图像位置的快速计算处理

图表和图形

svg和canvas都可以表现图表(如柱状图, 散点图, 饼图等等), 在选择开源的第三方库绘图的时候应该要注意根据使用场景来选择
以下情况使用svg为佳:

  • 数据源是或者类似xml(svg)文档
  • 需要用户交互
  • 使用到css就可以满足大部分样式需求
    但是如果需要更高的速度, 那么需要使用canvas:
  • 地图交互: 查找路径
  • 复杂工程流程图
  • 网页游戏
使用场景一览
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,612评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,259评论 4 61
  • 今天是个难忘的日子,因为我们五(4)班、五(六)班联合中队成功举办了庆祝少先队建队68周年主题队会,我有幸...
    凡间客阅读 557评论 0 1
  • 【导读】一位身强体壮的朋友,40多岁,买了几个苹果,旁边人随便寒暄一句“买了苹果?”,他脱口而出“吃了去死的”,还...
    薛开伍阅读 1,730评论 1 4
  • 上初三的时候,我们班来了一个转校生。由于是历史老师的侄子,于是安排坐在我这个学霸旁边。名字很有意思,叫葛后山。初听...
    福宁阅读 601评论 4 6