02《跟月影学可视化》学习笔记@4大图形系统

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

1. HTML+CSS

用来呈现普通的 Web 网页。

// CSS柱状图
网格布局（Grid Layout）+ 线性渐变（Linear-gradient）

// CSS饼图
圆锥渐变

// CSS折线图
1. 用高度很小的div元素模拟线段
2. 用transform改变角度和位置
3. 用clip-path对不规则图形填色或描边

缺点 从 CSS代码里很难看出数据与图形的对应关系，需要开发自己换算。一旦图表或数据发生改动，需要重新计算，不便于维护。

demo

2. SVG

Scalable Vector Graphics 可缩放矢量图。是一种基于 XML 语法得图像格式，可以用图片（img元素）的 src属性加载。

// 矩形

// 圆弧

// 椭圆

// 多边形

// 贝塞尔曲线

MDN官方SVG教程

优点 元素的属性和数值可以直接对应起来。

缺点 只适合应用于元素较少的简单可视化场景。

一个 SVG 元素只表示一种基本图形。如果是复杂数据的展示，生成图形的 SVG 元素会很多，会占用很多内存空间，引擎、布局计算和渲染树生成的开销会增加，影响性能。

3. Canvas2D

浏览器提供的 Canvas API 中的一种上下文。

方便绘制基础的几何图形。

// 指令式绘图系统：调用绘图指令，然后引擎直接在页面上绘制图形。
1. 在浏览器上创造一个空白的画布，提供渲染上下文，赋予绘制内容的能力。
2. 调用渲染上下文，设置各种属性，然后调用绘图指令完成输出即可。

优点 不需要经过 HTML，CSS解析、构建渲染树、布局等一系列操作，单纯绘图要快很多。

缺点 需要通数学计算来定位获取局部图形，交互不便利。

4. WebGL

浏览器提供的 Canvas API 中的另一种上下文，是 OpenGL ES 规范在 Web 端的实现。

利用 GPU 并行处理的特性渲染各种复杂的 2D 和 3D 图形。

1. 绘制的图形数量非常多；
2. 对较大图像的细节做像素处理；
3. 绘制 3D 物体。

5. 图形系统与浏览器渲染引擎工作对比

HTML 和 CSS 作为浏览器渲染引擎的一部分，要先解析HTML、SVG、CSS，构建 DOM树、RenderObject树、RenderLayer树，然后用 HTML 或 SVG 绘图。当图形发生变化时，很可能要重新执行全部工作，性能开销很大。

相比于 HTML 和 CSS，Canvas2D 和 WebGL 更适合去做可视化这一领域的绘图工作：它们的绘图 API 能够直接操作绘图上下文，一般不涉及引擎的其他部分，在重绘图像时也不会发生重新解析文档和构建结构的过程，性能开销小很多。

6. 数据可视化实现方案对比分析