前端可视化是一个比较大的方向,目前也有专门的可视化工程师,前端可视化其实主要基于两种方式去实现,一种是html5新出的canvas,另一种是svg。
在我看来,canvas更像自己用手画上去的,它是一种位图,在网页中具有保存的功能,另外缺点就是放大会失真,但是毫无疑问性能比svg要好,而svg更像html标签一样,另外我们用纯div+css也可以做到可视化,不过性能就更差了,svg是基于xml的一个个标签,而这些标签可以添加dom事件,同样svg是一种矢量图,放大不会失真。
所以一般都是基于canvas对网页进行可视化展示的,不过canvas与页面元素交互效果并不好,毕竟不是dom元素,他需要测量canvas的坐标的一定范围确定位置,所以需要复杂的封装才可以交互,就目前来说canvas更火一点!!
介绍一下svg'和canvas的基本框架,canvas基本上都会采用echarts,相信大多数前端工作者或多或少都会接触到echarts,可以说真的十分神奇,包含了一些基本的可视化内容。图表、柱状图、折线图、热力图、地图.......而svg基本的框架则是d3.js,不是很了解,不过听说是可视化方面的jq,可见是多么的重要。
而可视化之所以可以独立出来是因为它不只可以做基本的图标交互,甚至还可以做h5游戏,3D效果图等。
WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。
这是一些介绍,主要的框架是three.js,这是一种很大的可视化知识,就像小程序可以从前端当中分离出去一样,可视化也在渐渐的从前端分离出去,但是前端工程师也必须用到一些知识,个人认为会用上面其中一种就够用了。