canvas

canvas 和 svg 区别

特性	SVG	Canvas
数据结构	矢量图形，DOM节点	位图，像素数组
渲染方式	保留模式，自动重绘受影响元素	即时模式，需手动重绘
交互性	直接绑定事件，精细交互	需手动检测碰撞，复杂交互成本高
缩放质量	无损，矢量图形	有损，位图缩放
性能（大量元素）	大量元素时性能下降（DOM节点多）	大量元素时性能更优
适用场景	图标、图表、交互式图形	游戏、实时动画、像素操作

选择建议：

• 若需交互性、高清晰度、简单动态修改，选SVG；
• 若需高性能渲染、复杂动画、像素级控制，选Canvas。
• 实际项目中，两者也可结合使用（如用SVG做交互控件，Canvas做底层渲染）。