前端可视化的四种方式

方式	描述	优点	缺点
HTML+CSS	传统原生可视化方式	简化开发 节省资源，无需引入第三方库	CSS具有一定局限性，无法直观体现数据 绘制复杂图形性能低
SVG	声明式图形系统（像HTML一样绘图），与HTML+CSS差别不大	增强了HTML+CSS能力，同时支持DOM事件，易于实现用户交互 能更直观体现数据	复杂图形场景性能低
Canvas2D	指令式绘图系统，使用内置API函数绘图	相较WebGL简单易用 性能较快	用户交互、图形联动交互较难实现 绘制大量图形性能有瓶颈
WebGL	更开放、更底层的绘图系统，API更底层，能力更强	自定义程度高（API更开发），功能更强大，支持3D 性能强劲	使用复杂，上手难度高 仅限于特定场景使用

四种方式绘图的具体实现

HTML+CSS

绘制柱状图

代码中无法一眼看出数据与图标对应的关系，难以维护；
复杂图表存在性能问题，绘图方式不是直接与绘图上下文打交道，需要经过浏览器的绘制流程。

SVG

绘制柱状图 SVG 绘制图表与 HTML 和 CSS 绘制图表的方式差别不大，只不过是将 HTML 标签替换成 SVG 标签，运用了一些 SVG 支持的特殊属性。缺点与HTML+CSS绘图差不多一致。

Canvas2D

结合requestAnimationFrame实现粒子运动 Canvas 绘制矩形的过程：

• 获取 Canvas 对象，通过 getContext(‘2d’) 得到 2D 上下文；
• 设置绘图状态，比如填充颜色 fillStyle，平移变换 translate 等等；
• 调用 beginPath 指令开始绘制图形；调用绘图指令，比如 rect，表示绘制矩形；
• 调用 fill 指令，将绘制内容真正输出到画布上。 可见Canvas更偏向底层。

WebGL

绘图系统6部分

• 光栅（Raster）：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。
• 像素（Pixel）：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
• 帧缓存（Frame Buffer）：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
• CPU（Central Processing Unit）：中央处理单元，负责逻辑计算。
• GPU（Graphics Processing Unit）：图形处理单元，负责图形计算。

绘图五步骤

1. 创建 WebGL 上下文；
2. 创建 WebGL 程序（WebGL Program）；
3. 将数据存入缓冲区；
4. 将缓冲区数据读取到 GPU；
5. GPU 执行 WebGL 程序，输出结果。

绘制三角形