Day26 - Canvas 与 SVG的区别

2022-06-23 123

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Day26 - Canvas 与 SVG的区别

SVG

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)。 SVG 是使用 XML 来描述二维图形和绘图程序的语言

<svg width="400" height="110">
  <rect
    width="150"
    height="75"
    style="fill: rgb(0, 0, 255); stroke-width: 3; stroke: rgb(0, 0, 0)"
  />
</svg>

Canvas

HTML [canvas] 标签用于通过脚本（通常是 JavaScript）动态绘制图形。

<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript">
  var c = document.getElementById("myCanvas");
  var cxt = c.getContext("2d");
  cxt.fillStyle = "#FF0000";
  cxt.fillRect(0, 0, 150, 75);
</script>

Canvas优势

绘制出来的图形是位图具有很好的渲染性能

适合数据量比较大（>1000）

大量图形高频率交互

适合游戏

可以导出jpg/png图片

Echarts中的热力图

网络异常，图片无法展示

Echarts中的炫光拖尾

网络异常，图片无法展示

SVG优势

矢量图放大不失真

支持事件处理器

文字独立、可编辑可搜索

案例选择了一个Vue3中的一个demo，通过响应式数据直接渲染svg，非常的精彩。

<g>
  <polygon :points="points"></polygon>
  <circle cx="100" cy="100" r="80"></circle>
  <axis-label
              v-for="(stat, index) in stats"
              :stat="stat"
              :index="index"
              :total="stats.length">
  </axis-label>
</g>

function valueToPoint (value, index, total) {
  var x     = 0
  var y     = -value * 0.8
  var angle = Math.PI * 2 / total * index
  var cos   = Math.cos(angle)
  var sin   = Math.sin(angle)
  var tx    = x * cos - y * sin + 100
  var ty    = x * sin + y * cos + 100
  return {
    x: tx,
    y: ty
  }
}

对比表格

	Canvas	SVG
大数据量	✅	❌
高交互场景	✅	❌
可导出图片	✅	❌
放大不失真	❌	✅
支持事件处理	❌	✅
文字可编辑	❌	✅