NoteDeep

  • eslint

  • flow

  • 在web上绘图

  • .babelrc的配置

  • d3

  • Questions

  • lodash

  • Electron

  • material-ui学习

  • js模块化

  • sass

  • 拖拽

  • vue

  • React

  • npm

  • typescript

思考什么时候用canvas 什么时候用svg

两种技术之间的本质区别： canvas处理像素，而svg处理文档对象模型 (DOM)


Canvas 和 SVG 的对比

Canvas

  • 基于像素（Canvas 在本质上是一个具有绘图 API 的图像元素）
  • 单个 HTML 元素，在行为上类似于 <img>
  • 视觉呈现通过脚本以编程方式创建和修改
  • 事件模型/用户交互是粗粒度的 – 仅在画布元素上，交互必须根据鼠标坐标手动编程
  • API 不支持可访问性，除了画布，还必须使用基于标记的技术

SVG

  • 基于对象模型（SVG 元素与 HTML 元素类似）
  • 多个图形元素，是文档对象模型 (DOM) 的一部分
  • 视觉呈现使用标记创建并通过 CSS 或通过脚本以编程方式修改
  • 事件模型/用户交互基于对象，是在原语图形元素上的 – 线条、矩形、路径
  • SVG 标记和对象模型直接支持可访问性


下面这幅图很好的说明了两者的应用场景：




Canvas

实时高容量数据表示（大规模数据）
高性能（滤镜、光线跟踪器）
2D 休闲游戏

中立

包含丰富图形的 Web

SVG

交互式图表和图形
用于查看和打印的高保真度文档 、
静态图像


参考文献：
https://blogs.msdn.microsoft.com/weizhong/2011/07/15/canvas-svg/




评论列表

    Canvas 和 SVG 的对比
    下面这幅图很好的说明了两者的应用场景：