html中的svg和canvas
文章类型:html
发布者:admin
发布时间:2023-04-15
<canvas> 标记和 SVG 之间的一个重要的区别就是,<canvas> 使用 JavaScript API绘图,而 SVG 使用xml元素,SVG文件就是存粹的XML
一:canvas: 通过 JavaScript 来绘制 2D 图形,canvas 是逐像素进行渲染的。
在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。
如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象
1:依赖分辨率
2:不支持事件处理器
3:弱的文本渲染能力
4:能够以 .png 或 .jpg 格式保存结果图像
5:最适合图像密集型的游戏,其中的许多对象会被频繁重绘
二:SVG : 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。
可以为某个元素附加 JavaScript 事件处理器。
每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
1:不依赖分辨率
2:支持事件处理器
3:最适合带有大型渲染区域的应用程序(比如谷歌地图)
4:复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
5:不适合游戏应用
三:区别
1:兼容性:svg是xml,canvas是html5,兼容性svg更好
2:事件处理:svg是xml,可以对部分节点绑定事件,canvas是标签
3:渲染:canvas是基于js绘制的,有像素的概念,清晰度依赖分辨率;svg是xml不依赖分辨率
4:SEO: canvas是基于js绘制的,不会被搜索引擎抓取到
5:性能:canvas适用于图像密集型的游戏,SVG是xml节点,任何操作节点都会非常消耗性能,所以SVG不适合游戏
6:其他:canvas可以保存为.jpg .png图片
四:总结
canvas 依赖分辨率比较适合交互比较多的场景;svg不依赖分辨率不会失真,合适交互较少的场景