可视化（Visualization）是利用计算机图形学和图像处理技术，将数据转换成图形或图像在屏幕上显示出来，并进行交互处理的理论、方法和技术。

我们在进行 web 可视化开发的时候，我们会综合使用 HTML+CSS、SVG、Canvas（2D、WebGL）等技术去完成我们的作品，其中有很多 API 都是类似的，但这几个其中都有什么样的区别呢？

HTML+CSS

html 和 css 是我们最常用的图文布局，采用声明式的写法，直接描述结果，相关实现是交给浏览器去完成，提供了文字、图片、视频、表格等处理方式，有不同的布局的计算方式，比如 table 布局，flex 布局，grid 布局等等，css3 更是提供对矩阵的运算和图像滤镜，一般做图文排版都会选择此

SVG

SVG，是 W3C XML 的分支语言之一，用于标记可缩放的矢量图形，采用 DOM 接口的形式，所以它的绘制模式是保留模式，而且 CSS 能对其产生效果，并且事件也直接使用 DOM 的，不需要第三方拓展，一般做字体、 icon、移动端做图表的选择上会比较多

Canvas

canvas 是 HTML5 标准新增的画布标签，用于绘制图形，不像前面两种，canvas 采用的是立即模式，通过逐像素来进行渲染，即不保留节点属性，在 HTML 中它只有一个 canvas 标签，所以事件流需要自己拓展，而且生成的图像只能显示在固定的区域，当显示区域变大的时候，它不会跟随一起放缩，而 canvas 一般用于游戏开发和图表等，所以它本身分为 2D 和 3D，2D 则不多介绍，毕竟就是通过画笔进行绘制图形，API 也不多，下面说一下 3D 方面的

WebGL

首先明确一下，在画布中我们肯定绘制出来的一直都是 2D，但 2D 其实是 3D 的其中一个维度下的映射，比如我们使用相机对人拍照得到的照片，照片是 2D 的，但内容在感官下就是立体 3D 的，在 web 中我们用的是 WebGL，WebGL 是从 OpenGL 的 JavaScript 实现的子集，分为 1.0 和 2.0，具体历史不多细说，一般我们在 web 上看到的 3D 效果都是基于 webgl 的

WebGL（Web Graphic Library）是一个 JavaScript API，用于在任何兼容的 Web 浏览器中渲染 3D 图形。WebGL 程序由用 JavaScript 编写的控制代码和用 OpenGL 着色语言（GLSL）编写的着色器代码构成，这种语言类似于 C 或 C++，可在 GPU 上执行。

WebGPU

WebGL2.0 之后按道理应该是 WebGL 3.0，但是正是由于从 OpenGL 里迁移过来的， WebGL 与现代 GPU 的设计不匹配，导致 CPU 性能和 GPU 性能问题。这也使得在现代原生 GPU API 之上实现 WebGL 变得越来越困难，所以 WebGPU 不是 WebGL 的延续，也不对标 OpenGL，所以就需要用名称在概念上进行区分。目前还在出标准中

最后

上面几种技术说到底，其实逃不开 web 可视化渲染基础理论、计算机图形学和图像处理技术，这一点来说，只要掌握了理论基础，不用 webgl 的 API，我们也可以在 canvas 中用 2D 自行计算出 3D 图形