美文网首页网络拓扑
151203-svg,canvas,webgl

151203-svg,canvas,webgl

作者: wenchaohe | 来源:发表于2015-12-03 15:57 被阅读169次

    1-浏览器可视化的新宠 WebGL,媒体现在开始考虑如何使用 WebGL 来绘制高性能的3D图;

    2-如今时兴的两种浏览器绘图模式: 

    -SVG (代表:D3.js, Raphael.js) ,svg可以绘制矢量图,在网页上使用。也可以通过ai画出图形导出svg格式;SVG 生成矢量图,并且和浏览器 DOM 的完全融合,这使它支持最灵活的交互效果和 CSS 样式。但是也正是因为每一个 SVG 元素都是一个 DOM 元素,绘制或移动一个 SVG 元素,浏览器都需要重新绘制、渲染页面,导致速度变慢,性能变差。要保证在浏览器绘制 SVG 过程中无时滞,一个页面静态 SVG 元素大约可以绘制一万个,动态的 SVG 元素,就最好不要超过一千个。

    -Canvas (代表: Echarts, Google Charts, p5.js)与 SVG 绘图不同的是,Canvas 内绘制的元素都是预先生成,预先定下元素特性,预先写好动画路径。使用 Canvas 绘图,你需要写下每一个元素的输出的轨迹。由于 Canvas内绘制的元素并不涉及 DOM 元素,和 SVG 绘制的元素相比,交互性差,但也正因如此,在元素自身的动画特效上不受 DOM 位置限制,能够绘制表现力更强的图形,同时 canvas 生成位图,在浏览器性能(载入速度)上比 SVG 更佳。

    -WebGL:与 Canvas 和 SVG 不同的是,WebGL 通过 WebGL JS API 连接 Javascript 和 GPU 编译程序。GPU 绘图的渲染大部分在 GPU 上进行,对浏览器压力减小,性能几个量级地提高,使 WebGL 成为浏览器内的3D渲染、大数据可视化唯一的选择。

    3-web based visualisation

    相关文章

      网友评论

        本文标题:151203-svg,canvas,webgl

        本文链接:https://www.haomeiwen.com/subject/gnkshttx.html