highcharts基于svg技术,而echarts基于html5中的canvas元素
图片的数字化,图片存储有两种方案。第一是位图,也叫光栅图。就是以自然的光学的眼光将图片看成是平面上密集排布的点的集合,每个点都有独立的频率和强度,反映到视觉上就是颜色和亮度。常见的JPEG/JPG,GIF,PNG,BMP都是位图格式。
第二种是矢量图。它用抽象的视角看图形,记录其中展示的模式而不是各个点的数据。它把图像看成对象的组合。用曲线记录对象的轮廓,用某种颜色的模式描述对象内部的图案。矢量图格式有SVG,PDF,SWF等
矢量图适合用于记录诸如符号、图标等简单图形,而位图适合于没有明显规律的、颜色丰富细腻的图片
svg(scalable vector graphic)可伸缩矢量图形:使用xml定义的用于网络的基于矢量的图形
①图像在放大或改变尺寸的情况下图形质量不会有所损失
②svg采用文本描述矢量化图形。svg图像中的文本是可选的,也是可搜索的,因此很适合做地图,用文字描述图像它的可用性就增加,比如可以读出来
③具有交互性和动态性,基于xml的svg格式具有很强的动态交互性
④完全支持DOM
canvas:基本上是一个用js操作的位图(bitmap)
canvas是html5的一个新增画布元素。它没有自己的行为,但是定义了一个api支持脚本化客户端绘图操作。
可以在canvas对象上指定宽和高,但是,大多数功能都是通过CanvasRenderingContext2D对象实现,该对象是通过canvas对象的getContext()方法且以字符串“2d”作为唯一参数获得的
canvas api有个缺点是它没有对绘制文本提供任何支持
canvas要移除一个元素,往往要擦掉绘图重新绘制
至于为什么要用脚本进行绘制而不是像svg那样用元素形式描述,原因不知