CANVAS与SVG的区别

Canvas 和 SVG 都是用于在网页上绘制图形和动画的技术，但它们在图形描述方式、渲染机制、适用场景等方面存在一些区别，以下是主要信息：

图形描述方式

• Canvas：使用 JavaScript 通过一系列绘图命令来直接在画布上绘制图形，开发者需要使用 JavaScript 代码精确地指定每个图形的绘制位置、形状、颜色等属性，被称之为位图。
• SVG：使用 XML 格式来描述图形，是一种基于不规则矢量的图形系统。它通过标签和属性来定义各种图形元素，如圆形、矩形、路径等，以及它们的位置、大小、颜色、填充和描边等样式。

渲染机制

• Canvas：一旦图形绘制完成，画布就记住了绘制的结果，如果需要修改图形，通常需要重新绘制整个画布或者至少是受影响的部分。
• SVG：由于是基于矢量图形的描述，SVG 在渲染时会根据图形的定义和当前的显示区域进行动态渲染。这意味着无论 SVG 图形被放大或缩小多少倍，清晰度都不会受到影响。

动画实现方式

• Canvas：通常需要通过 JavaScript 不断地清除画布并重新绘制图形来实现动画效果，需要开发者手动管理每一帧的绘制和更新。
• SVG：可以利用 CSS 的过渡（transitions）和动画（animations）属性来实现动画效果，也可以通过 JavaScript 直接操作 SVG 元素的属性来实现动画，实现方式更灵活多样。

事件处理

• Canvas：本身不支持对单个图形元素的事件处理，但可以通过 JavaScript 为其添加事件监听器来实现交互功能，因为它只是一个绘制图形的平面。如果要实现交互，需要通过计算鼠标位置与图形的关系来手动判断和处理事件。
• SVG：由于其图形是基于 DOM 树结构的，每个图形元素都是一个独立的 DOM 节点，因此可以直接为每个图形元素添加事件监听器，方便地实现各种交互效果。

适用场景

• Canvas：2D/3D游戏开发等需要高性能和频繁重绘的场景，因为它可以直接操作像素，能够更高效地进行绘制和更新。
• SVG：可交互的图形界面、图标设计，特别是对于需要在不同分辨率下保持清晰显示的图形和需要方便地进行样式调整和交互的情况（比如说地图需要放大缩小使用）