多数绘图工具都支持Canvas和SVG两种渲染模式，这俩到底有什么不一样？

Web开发中，Canvas和SVG是两个技术人员非常熟悉的图形绘制技术。但是始终感觉这俩区别不大，尤其反映在绘图/开发某些内容的时候。

Canvas是像素级的绘图板

Canvas是一种基于位图的绘图方式，所有绘制操作都是基于像素点完成。并且Canavas支持通过Js API进行实时绘制，非常适合需要频繁更新画面的应用。

Canvas对处理大量图形元素性能优势明显，因为它只关心当前帧的画面更新。

示例代码

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');

// 绘制一个矩形
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);

SVG是可伸缩矢量图形

SVG使用XML定义图像，支持无限放大而不失真。SVG不仅可以用于静态图形，还可以实现复杂的交互效果。也就是说静态和动态的都可以实现。

由于SVG是基于XML的，它可以被浏览器解析为DOM节点，这意味着每个图形元素都可以被单独控制和修改。

示例代码

<svg width="200" height="200">
  <rect x="10" y="10" width="150" height="100" fill="blue"/>
</svg>

异同对比

特性	Canvas	SVG
渲染方式	动态渲染，逐帧重绘	静态或动态，基于DOM更新
放大效果	放大会导致模糊	支持无损放大
事件处理	不直接支持事件监听，需手动实现	天生支持事件监听
性能	在绘制复杂图形时效率更高	当图形数量巨大时可能性能下降

应用场景

Canvas

• 游戏开发：快速的图形渲染和高效的动画处理使Canvas成为游戏开发的理想选择。
• 数据可视化/交互性界面：需要频繁刷新的数据图表，或者是需要进行动态响应交互的操作界面。

SVG

• 图标和UI组件：清晰度高且易于调整大小，适合用于网页上的按钮、图标等UI组件。
• 复杂图形编辑工具：利用其基于DOM的特性，可以方便地实现图形的选择、移动等操作。

结语

一般而言如果项目强调动态内容和高效性能，那么Canvas可能是更好的选择。

如果更看重图形的质量和可交互性，SVG则是更优的选择。