canvas 和 svg 的区别
这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」。
canvas是什么
在日常开发中，我们将 canvas比做一块画布，可以在画布上绘画任何图形，图形和文字。
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
svg是什么
svg是可缩放的矢量图形，最大的特点就是，它在被放大和缩小的时候都不会对图形本身造成失真。
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
canvas 和 svg 的区别
1. 分辨率的影响
svg 和 canvas 绘制图形在本质上是不同的。
svg 是矢量图，svg在绘制的时候是通过记录图形的起始和重点进行绘制线条的，当分辨率发生改变，那么相对位置也会发生改变，所以图形不会随着分辨率的改变而受到影响。
canvas 是通过像素去处理图形的，当分辨率发生改变时，会影响到图像的绘制，放大会造成失真。
2. dom 渲染的区别
使用 svg 和 canvas 分别画一个圆，然后查看他们的 DOM
<!DOCTYPE html>
<html>
<body style="padding: 10px">
svg
<div class="title-container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
<circle
cx="100"
cy="50"
r="40"
stroke="black"
stroke-width="2"
fill="white"
/>
</svg>
canvas
<canvas id="myCanvas"/>
</body>
</html>
<script>
onload = function () {
var c = document.getElementById('myCanvas')
var ctx = c.getContext('2d')
ctx.beginPath()
ctx.arc(100, 75, 50, 0, 2 * Math.PI)
ctx.stroke()
}
</script>
可以看到 svg 在渲染的时候会产生图形绘画的 dom ，而 canvas 在渲染的时候只有一个 canvas dom。
关于事件绑定
由于 canvas 在渲染的时候仅仅会产生一个 canvas Dom，不会产生具体图形的 dom，所以 canvas 的事件绑定只能够绑定在最外层的标签上，但是 svg 可以将事件绑定在对应的具体图形上。
绘制过程
通过上述代码可以看出， svg 通过标签就可以绘制出图形，但 canvas 往往需要通过 js 的配合使用，才能绘制出想要的图形。
总结
以下是 w3cSchool 给出的部分总结:
Canvas
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
