echarts 底层基于canvas ,highcharts 底层基于svg;canvas 与svg 的区别
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts 底层基于canvas ,highcharts 底层基于svg;canvas 与svg 的区别相关的知识，希望对你有一定的参考价值。
参考技术A Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。Canvas:
通过javascript来绘制2D图形;是逐像素进行渲染的;其位置发生改变，会重新进行绘制。
SVG:
一种使用XML描述的2D图形的语言;SVG基于XML意味着，SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
比较:
Canvas:
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG:
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用
数据可视化分析
目前来说，主流的数据可视化框架包括d3.js、zrender.js、Echarts等等，后者是百度开发的，百度前端团队还是非常强的，而其代表也是Echarts框架在前端可视化方面的探索。
在Echarts4.0中提供了canvas和svg两种渲染方式，而d3是以svg为主的。另外，对于Echarts来说，默认使用的时canvas渲染，但是我们可以配置为svg渲染，且对于低版本的IE，echarts甚至使用了vml来支持。另外，Echarts底层使用了canvas类库zrender，它是非常轻量的，zrender也是百度前端开发的框架，使用起来非常方便，只需要去github上download下来，然后找到dist中的zrender.js，就可以像下面这样画一个圆了：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>zrender</title> <style> div#main { width: 500px; height: 500px; border: thin solid red; } </style> <script src=\'./zrender.js\'></script> </head> <body> <div id="main"></div> <script> var zr = zrender.init(document.getElementById(\'main\')) var circle = new zrender.Circle({ shape: { cx: 150, cy: 50, r: 40 }, style: { fill: \'none\', stroke: \'#F00\' } }) zr.add(circle) </script> </body> </html>
使用这种类库的好处就是可以轻松的完成效果，而不会自己写比较底层的重复代码。
首先，我们知道canvas是html5提出的，使用html5标签，然后底层用js来写，它是位图，所以在放大、缩小的过程中会有失真问题，但是canvas的功能更为强大一些。而svg是矢量图，是使用xml来写的，他的特点是无论怎么缩放都不会失真。并且canvas可以处理更大的数据量，而svg则相对较弱。 之前说到Echarts更为流行，这是因为Echarts提供了svg和canvas两种方式，这是我们可以自由切换的，所以可以适应不同的场景. 比如在windows系统，为了达到更好的渲染效果，我们会在Firefox浏览器使用svg的渲染引擎，而在IE浏览器使用canvas的渲染引擎。但是需要注意的是在IE8以下的浏览器版本中，是不能使用这些可视化工具的。 更多如下所示；
（其中，绿色表示推荐使用svg、红色表示推荐使用canvas，而灰色表示使用svg和canvas都是可以的，至于哪一个更为合适，还是需要我们自己来测试才能做定夺）
移动平台优选SVG。 在移动端上，优于cpu和内存限制，canvas的表现可能会非常差，而相比之下svg会有更多优势。所以，我们建议在移动端使用svg进行渲染。
图表个数很多时优选svg。 当图表个数很多时，占用的内存很大程度上造成了页面是否卡顿的体验差异。在这一情况下，svg的优势明显。 canvas的内存占用量相比svg可以达到十倍以上。
导出小文件高清晰时使用svg。 svg文件小，并且可以无限清晰放大。
部分特殊渲染效果只有canvas支持，使用canvas。对于比如炫光尾迹特效等，只有canvas支持，但是除此之外，大部分svg都是支持的，就需要使用svg了。
数据量特别大的时候推荐使用canvas渲染。
综上，我们使用Echarts是不错的选择，svg可以使得移动端的使用占用内存小，流产度高；对于大数据量，使用canvas处理； 而对于低版本的ie，也是可以使用vml，所以，一个echarts就可以解决所有问题了。
以上是关于echarts 底层基于canvas ,highcharts 底层基于svg;canvas 与svg 的区别的主要内容，如果未能解决你的问题，请参考以下文章