HTML5中Canvas与SVG的画图原理比较

Canvas与SVG：浏览器中的两种图形绘制方式

在网页开发中，我们常常需要在浏览器中展示各种各样的图形，这时我们可能会选择使用Canvas或者SVG来实现。虽然它们都可以实现在浏览器中画图的功能，但其背后的原理和适用场景却有着显著的不同。

我们来了解一下SVG。SVG是一种基于XML的语言，用于描述二维图形。这意味着在SVG的DOM中，每一个元素都是可以被操作的。你可以为每一个元素添加JS事件处理器，实现交互功能。在SVG中，每一个图形都被视为一个对象。当SVG对象的属性发生改变时，浏览器能够自动重新生成图形。这种特性使得SVG非常适合用于需要复杂图形和交互的场合。

而Canvas则是一种在fly上绘制2D图形的技术，主要通过JavaScript来实现。Canvas能够按照像素进行重绘，这意味着我们可以在Canvas上实现各种复杂的动画和图形变换。一旦图形完成，它就会被浏览器“忘记”。如果需要改变图形的位置，那么整个屏幕需要重画，包括图形覆盖的对象。Canvas更适合用于许多对象频繁重画的场景，如图形游戏等。

那么，Canvas和SVG之间有何不同呢？下面是一张简化的对比表：

| 项目 | Canvas | SVG |

| | | |

| 分辨率依赖 | 依赖分辨率 | 独立于分辨率 |

| 事件处理器支持 | 不支持事件处理器 | 支持事件处理器 |

| 文本渲染能力 | 弱文本渲染能力 | 最适合具有大渲染面积的应用（如谷歌地图） |

| 输出格式 | 可以保存最终图片为PNG或者JPG | 复杂图像重画时可能变慢（特别是在DOM复杂的情况下） |

| 适用场景 | 最适合许多对象频繁重画的图形游戏 | 不太适合游戏应用，更适合需要复杂图形和交互的场合 |

Canvas和SVG各有其优点和适用场景。选择使用哪一种，主要取决于你的具体需求和项目特点。无论是Canvas还是SVG，都可以帮助我们创造出丰富多彩的网页内容，提升用户体验。

关于“cambrian.render('body')”，这似乎是一句特定的代码或命令，但没有上下文很难确定其具体含义。如果这是某个特定库或框架的语法，建议查阅相关文档以获取更详细的信息。