大前端!一文看懂图像可视化技术，超出你想象Svg、Canvas、Webgl

先看一下可视化的图形：

Svg图形

Canvas图形

Webgl图形

SVG

• 基于XML描述的2D图形的语言
• 图形DOM中的每个元素都是独立的，可以附加Javascript事件处理函数。
• 在 SVG 中，想要改变某个图形元素，只需改变对应的DOM中的属性值。
• Svg画一个圆

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

<circle cx="10" cy="10" r="5" stroke="re'd" stroke-width="2" fill="yellow" />

</svg>

Canvas

1. HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
2. 画布是一个矩形区域，您可以控制其每一个像素。
3. canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
4. 通过Javascript在网页上绘制2D图形。
5. 画布是一个矩形区域，可控制其每一像素，是逐个像素进行渲染的。
6. 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

一个元素

<canvas id="can" width="100" height="100"></canvas>

1. WebGL
2. WebGL（Web图形库）是一个JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形。WebGL通过引入一个与OpenGL ES 2.0非常一致的API来做到这一点，该API可以在HTML5 <canvas>元素中使用，可以利用用户设备提供的硬件图形加速。
3. Web开发人员可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型
4. 基于Canvas的3D框架
5. 主要用来做 3D 展示、动画、游戏。
6. SVG 、Canvas对比