跟月影学可视化
月影
奇虎360奇舞团团长,可视化UI框架SpriteJS核心开发者,《JavaScript王者归来》作者
立即订阅
1912 人已学习
课程目录
已更新 3 讲 / 共 45 讲
0/4登录后,你可以任选4讲全文学习。
课前必学 (2讲)
开篇词 | 不写网页的前端工程师,还能干什么?
免费
预习 | Web前端与可视化到底有什么区别?
图形基础篇 (1讲)
01 | 浏览器中实现可视化的四种方式
跟月影学可视化
15
15
1.0x
00:00/00:00
登录|注册

01 | 浏览器中实现可视化的四种方式

月影 2020-06-22
你好,我是月影。
上一节课我们了解了什么是可视化。可视化用一句话来说,本质上就是将数据信息组织起来后,以图形的方式呈现出来。在 Web 上,图形通常是通过浏览器绘制的。现代浏览器是一个复杂的系统,其中负责绘制图形的部分是渲染引擎。渲染引擎绘制图形的方式,我总结了一下,大体上有 4 种。
第 1 种是传统的 HTML+CSS。这种方式通常用来呈现普通的 Web 网页。
第 2 种是使用 SVG。SVG 和传统的 HTML+CSS 的绘图方式差别不大。只不过,HTML 元素在绘制矢量图形方面的能力有些不足(我们后面会讲到),而 SVG 恰好弥补了这方面的缺陷。
第 3 种是使用 Canvas2D。这是浏览器提供的 Canvas API 中的其中一种上下文,使用它可以非常方便地绘制出基础的几何图形。在可视化中,Canvas 比较常用,下一节课我们会学习它的基本用法。
第 4 种是使用 WebGL。这是浏览器提供的 Canvas API 中的另一种上下文,它是 OpenGL ES 规范在 Web 端的实现。我们可以通过它,用 GPU 渲染各种复杂的 2D 和 3D 图形。值得一提的是,WebGL 利用了 GPU 并行处理的特性,这让它在处理大量数据展现的时候,性能大大优于前 3 种绘图方式。因此,在可视化的应用中,一些数据量大、视觉效果要求高的特殊场景,使用 WebGL 渲染是一种比较合适的选择。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《跟月影学可视化》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(8)

  • 寻找海蓝
    所以 Canvas 实际上是比 svg 更底层的API:

    1. svg 本质上是 Dom,是一种具有特殊属性的 Dom,Dom的优势和缺点它都具备,我们虽然可以像操作Dom那样方便地操作Canvas,但是不得不面对Dom性能低下的事实,所以 svg 只适合低动画需求、少元素数量需求的场景。
    2. Canvas 本质上是基于底层图形系统的封装,在浏览器上形成的是一张图片,但是它只提供了绘制功能,因此它非常简陋,没有事件系统意味着我们无法像操作Dom一样绑定事件,每个Dom对应着一个具体图形,而 Canvas 中只有绘图指令,并没有单个图形的概念,我们无法操作单个图形,只有一张整体的图片,也正因此Canvas任何小的改动都会导致整个画布的重绘。

    因此后面月影大佬讲的内容会非常干货,中文互联网上很少有的内容,比如通过数学计算捕获Canvas中的局部图形、通过分层or局部渲染避免整体的画布重绘等等,订阅的同学捡到宝了。
    2020-06-22
    2
    4
  • Light Yagami
    月影大佬,我来报道了
    2020-06-22
    2
  • TYY💭
    老师讲的非常有条理了

    作者回复: 谢谢~

    2020-06-22
    1
  • 一步
    Canvas 2D 和 WebGL 都是 Canvas API 的一种上下文, 那么 Canvas API 到底有多少中上下文 API 呢?

    还有问题就是 Canvas API 是不是就是一个接口规范, Canvas 2D 和 WebGL 只是其中的一种实现?
    2020-06-23
  • 王子晨
    大佬请问,svg和canvas的混合使用,对于性能的消耗怎样的,可以理解为这种混合模式在性能上优于canvas,低于webGL么?
    2020-06-23
  • .a_c.
    老师期待继续的课程

    顺便问问有计划出书不?[调皮]
    2020-06-23
  • gltjk
    用 SVG 做了文章里 HTML+CSS 实现的饼图,感觉麻烦多了,要自己计算极坐标……https://codepen.io/gltjk/pen/XWXRdVr

    作者回复: 棒!看了一下代码,写得挺好的。不过SVG用circle和stroke-dasharray来做,一般来说双色的饼图这样做简单,多色的感觉直接用path来做是不是会简单些呢?

    2020-06-23
    1
  • 彭涛 Chris
    所以 Canvas 是怎么实现的呢?也是用webgl吗?dom节点的渲染最终也是webgl吗?

    作者回复: 不是用WebGL,但是肯定用了GPU渲染。

    2020-06-23
收起评论
8
返回
顶部