canvas与svg的区别是：1、实现方式；2、渲染方式；3、图像质量；4、动画效果；5、兼容性；6、适用情况。实现方式是指，Canvas是基于像素的绘图技术。在使用Canvas时，开发者可以通过JavaScript动态地在画布上绘制图形、文字和图像。SVG是基于矢量的绘图技术。SVG使用XML描述图形，开发者可以通过XML元素来定义图形的结构和样式。
一、实现方式
- Canvas： Canvas是基于像素的绘图技术。在使用Canvas时，开发者可以通过JavaScript动态地在画布上绘制图形、文字和图像。Canvas通过设置像素点的颜色来创建图形，因此绘制的图像是一组静态的像素。
- SVG： SVG是基于矢量的绘图技术。SVG使用XML描述图形，开发者可以通过XML元素来定义图形的结构和样式。SVG绘制的图像是由数学公式来描述的，因此可以无限缩放而不失真。
二、渲染方式
- Canvas： Canvas使用JavaScript来控制每个像素的绘制，因此绘制过程发生在画布上。每次绘制都需要重新渲染整个场景，适用于图像频繁变动的动画效果。
- SVG： SVG是基于DOM的，它将图形作为独立的DOM节点，修改SVG元素将自动更新图形，而不需要重新渲染整个场景。适用于静态图形和复杂的交互图像。
三、图像质量
- Canvas： 由于Canvas是基于像素的，图像在放大时可能会失真，特别是当图像缩放较大时，像素会变得可见。因此，Canvas不适合用于需要高质量图像和无限缩放的场景。
- SVG： SVG是基于矢量的，图像可以无限缩放而不失真，因此适合用于需要高质量图像和精确控制的场景，比如图标、Logo等。
四、动画效果
- Canvas： Canvas可以通过每帧绘制实现动画效果，但需要手动控制每一帧的绘制过程。对于复杂的动画效果，需要处理较多的绘制操作。
- SVG： SVG支持使用CSS3和SMIL（可扩展多媒体集成语言）实现动画效果，可以更简单地创建复杂的动画。
五、兼容性
- Canvas： Canvas在大多数现代浏览器中都得到支持，但对于一些旧版本的浏览器可能不完全支持。
- SVG： SVG也在大多数现代浏览器中得到支持，对于旧版本的浏览器，可以使用polyfill进行支持。
六、适用情况
- 当需要实现复杂的交互图形、高质量图像或Logo时，SVG是更好的选择。
- 当需要实现图像频繁变动的动画效果时，Canvas是更合适的选项。
- 在移动端开发中，由于SVG的矢量性质，通常更适用于保证图像质量和节省带宽。
延伸阅读
Canvas与WebGL
除了Canvas和SVG之外，还有另一种绘图技术叫做WebGL。WebGL是基于OpenGL ES的3D绘图技术，它可以在浏览器中实现高性能的3D图形和动画效果。WebGL对于游戏和复杂的3D场景非常有用，但由于其复杂性和硬件要求，适用范围相对较窄。
