图形可视化与Web图像技术介绍

一、SVG：可伸缩的矢量图形（声明式方法：保留模式图形绘制）

SVG 本身是基于 XML 的一种独立的数据格式，用于声明式的 2D 矢量图形。但是，它也可以嵌入到 HTML 文档中，这是所有主流浏览器都支持的。

使用 SVG 绘制一个可调整大小的圆：

  
    
  

当浏览器窗口调整大小或缩放时，它将重新缩放图像，而不会丢失图像的任何质量（因为图像是根据形状定义的，而不是根据像素定义的）。当 SVG 元素被 JavaScript 代码修改时，它还会自动重新绘制图像，这使得 SVG 特别适合与 **JavaScript 库（如 D3）**一起使用，D3 将数据绑定到 DOM 中的元素，从而能够创建从简单图表到更奇特的交互式数据可视化的任何内容。

二、画布canvas（函数式方法：即时模式图形绘制）

canvas 元素只是在网页上提供了一个可以绘图的区域。使用 JavaScript 代码，首先从画布获取上下文，然后使用提供的 API，定义绘制图像的函数。

const canvas = document.getElementById(id);
const context = canvas.getContext(contextType);

// call some methods on context to draw onto the canvas

当脚本执行时，图像立即绘制成了底层位图的像素，浏览器不保留绘制方式的任何信息。为了更新绘图，需要再次执行脚本。重新缩放图像时，也会触发更新绘图，否则，浏览器只会拉伸原始位图，导致图像明显模糊或像素化。

1.上下文：2D

提供了一个用于在画布上绘制 2D 图形的高级 API。

绘制可调整大小的圆：

  
    
    
  

根据画布的当前大小，以像素为单位计算圆的半径和中心位置。这也意味着必须监听缩放的事件并相应地重新绘制。适用于绘制更多对象的、更复杂的动态可视化，比更新 DOM 中的大量元素，并让浏览器来决定何时呈现和呈现什么，带来更好的性能。

2.上下文：WebGL

大多数现代浏览器也支持 webgl 上下文。提供了使用 WebGL 标准绘制硬件加速图形的底层 API，尽管这需要 GPU 支持。它可以用来渲染 2D，更重要的是，也可以用来渲染本篇博客所说的 3D 图形。

//渲染圆圈

  
    
    
  

在渲染任何东西之前，要做很多设置。必须使用顶点列表，将圆定义为由小三角形组成的一个序列。还必须定义一个投影矩阵，将3D 模型（一个平面圆）投影到 2D 画布上。然后，必须编写“着色器”（用一种称为 GLSL 的语言），在 GPU 上编译并运行，以确定顶点的位置和颜色。
但是，额外的复杂性和较底层的 API，确实能够更好地控制 2D 图形绘制的性能。还提供了渲染 3D 可视化的能力。

三、X3D：面向声明式的3D图形

参考：X3D：现代Web的声明式3D技术