浅谈Canvas与SVG

深碍√TFBOYSˉ_ 2022-06-18 09:56 234阅读 0赞

1、SVG

SVG 可缩放矢量图形（Scalable Vector Graphics），是一种使用可扩展标记语言（XML）描述2D图形的语言。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。

SVG基于XML，意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加 JavaScript 事件处理器。

在SVG中，每个被绘制的图形均被视为对象，如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。也就是说，SVG绘图很容易编辑，只需要增加或移除相应的元素就可以了。

SVG是基于矢量的，它能够很好的处理图形大小的改变。SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。

SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景。

2、Canvas

Canvas 通过 JavaScript 来绘制2D图形（动态生成）。

Canvas 是逐像素进行渲染的。

在Canvas中，一旦图形被绘制完成，就不会继续得到浏览器的关注，如果其位置发生变化，整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas是基于位图的，它不能够改变大小，只能缩放显示。

Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制。

3、Canvas与SVG

<table style="font-family:'Microsoft YaHei'"> 
 <tbody> 
 <tr> 
 <td> Canvas </td> 
 <td> SVG </td> 
 </tr> 
 <tr> 
 <td> 位图 </td> 
 <td> 矢量图 </td> 
 </tr> 
 <tr> 
 <td> 依赖分辨率 </td> 
 <td> 不依赖分辨率 </td> 
 </tr> 
 <tr> 
 <td> 逐像素进行渲染 </td> 
 <td> 逐元素（DOM元素）进行渲染 </td> 
 </tr> 
 <tr> 
 <td> 通过JavaScript 绘制图形 </td> 
 <td> 基于XML，用文本格式的描述性语言来描述图像内容 </td> 
 </tr> 
 <tr> 
 <td> 不支持事件处理器。Canvas输出的是一整幅画布，能够以 .png 或 .jpg 格式保存结果图像 </td> 
 <td> 支持事件处理器。SVG绘制出的每个图形元素都是独立的DOM节点，能够方便的绑定事件 </td> 
 </tr> 
 <tr> 
 <td> 不能够改变大小，只能缩放显示 </td> 
 <td> 能够很好的处理图形大小的改变 </td> 
 </tr> 
 <tr> 
 <td> 放大或缩小时图形质量会有所损失 </td> 
 <td> 放大或缩小时图形质量不会有所损失 </td> 
 </tr> 
 <tr> 
 <td> 适合像素处理，动态渲染和大数据量绘制，最适合图像密集型的游戏（频繁重绘对象） </td> 
 <td> 适合静态图片展示，高保真文档查看和打印的应用场景，不适合游戏应用 </td> 
 </tr> 
 <tr> 
 <td> 如果图形位置发生变化，整个场景需要重新绘制，包括任何或许已被图形覆盖的对象 </td> 
 <td> 如果对象属性发生变化，浏览器能自动重现图形。也就是说，SVG绘图很容易编辑，只需要增加或移除相应的元素即可 </td> 
 </tr> 
 </tbody> 
</table>

4、Canvas与SVG绘制地图的选择

当绘制的对象数目较少时，Canvas和SVG的性能差不多，但是当数量增加之后，canvas的性能要远远优于SVG。

当需要动态渲染地图，频繁重绘时，选择Canvas更好。