1、Canvas 是用JavaScript 操作动态生成的, SVG 则是使用XML静态描述生成的;
2、Canvas 基于位图,简单来说就是图片放大会影响到显示的效果,造成不好的影响,SVG 基于矢量图,图形放大不会影响到显示效果。
3、发生修改事件的时候,canvas必须重绘,SVG不需要。
Canvas
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏,其中的许多对象会被频繁重绘
- Canvas 是逐像素进行渲染的。
SVG
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序(比如谷歌地图)
- 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
- 不适合游戏应用
其实并一定Canvas 或 SVG 哪个更好,只是分别适用的场合不同,比如Canvas做应用程序或游戏的较多,SVG做大型的 例如世界地图等较多。
本文对比了Canvas和SVG两种图形渲染方式的特点。Canvas适合图像密集型应用,如游戏,依赖分辨率,不支持事件处理器;而SVG适用于大型渲染区域,如地图,不依赖分辨率,支持事件处理器。两者各有优势,适用于不同场景。
696

被折叠的 条评论
为什么被折叠?



