美文网首页让前端飞Web前端之路
canvas与svg特性和使用对比

canvas与svg特性和使用对比

作者: 武大郎 | 来源:发表于2017-10-09 14:27 被阅读596次

两者比较一览

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:
  • 地图交互: 查找路径
  • 复杂工程流程图
  • 网页游戏
使用场景一览

相关文章

  • canvas与svg特性和使用对比

    两者比较一览 性能对比曲线图 使用场景举例 svg1.静态图像2.高保真文档(用于展示和打印) canvas1.处...

  • H5 新特性05

    SVG svg与canvas的区别 canvas绘制的是位图, svg绘制的是矢量图 canvas使用Ja...

  • 无标题文章

    SVG svg和canvas的区别 svg绘制的是矢量图, canvas绘制的是位图 svg使用XML来绘制图片,...

  • 2019-08-28 canvas

    canvas和SVG的区别:canvas使用它提供的方法来绘图,绘图API简洁。SVG通过构建XML元素数绘图,对...

  • 技术干货:前端图形化技术简介(上)

    Canvas与SVG 前端图形化技术,主要包括Canvas绘图和SVG绘图两类。 Canvas早在十几年前就被火狐...

  • canvas

    @(HTML5)[canvas与SVG] [TOC] 十 、canvas canvas的基本用法 canvas是H...

  • HTML5 绘图技术 「Canvas」和「SVG」

    本文重点还是要介绍Canvas,但每次提起Canvas,脑海总会想起SVG,因此先做个简单的对比。   *Canv...

  • CANVAS与SVG

    原文 SVG使用XML描述2D图形。canvas使用js描绘2D图形。SVG基于XML意味着SVG DOM中每个元...

  • canvas图表(1) - 柱状图

      原文地址:canvas图表(1) - 柱状图  图表一般使用到svg或canvas,其中canvas图表在处理...

  • D3 v5 学习笔记-2 SVG

    D3也可以使用Canvas绘图,不过对于SVG的支持更多。所以先从SVG开始。 1.SVG SVG教程-MDN 1...

网友评论

    本文标题:canvas与svg特性和使用对比

    本文链接:https://www.haomeiwen.com/subject/uirgextx.html