一浏览器可视化解决方案中常见概念Canvas、SVG、WebGL、zrender、D3、three.js、HighCh

一可视化工具的底层实现

Canvas

Canvas是Html5的一个新特性，依赖JS来绘制2d图形，如路径、矩形、原型、字符、图像等

Canvas可以理解为一个二维的网格画布，左上角为(0, 0)进行绘图

简易demo，相关教程可参考www.runoob.com/html/html5-…

1.绘制矩形
<!-- 定义画布 -->
<canvas id="canvas" width="800" height="800"></canvas>
<script>
    // 1. 获取canvas元素
    const canvas= document.getElementById('canvas')
    // 2. 获取context对象
    const ctx = canvas.getContext('2d')
    // 3. 填充颜色
    ctx.fillStyle = 'red'
    // 4. 绘制矩形 从坐标0, 0绘制宽100，高50的矩形
    ctx.fillRect(0, 0, 100, 50)
</script>

Svg

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。可伸缩意味着相比于传统图片或者canvas图像放大缩小时不会损失清晰度，能够在不同分辨率下不失真。

SVG 是一种用于描述二维图形的 XML 标记语言（不依赖于js），存储需要空间更小，常用于制作各种icon图标相关教程参考www.runoob.com/svg/svg-tut…

<!-- 创建svg画布 -->
<svg width="800" height="800">
    <!-- 绘制矩形 -->
    <rect width="50" height="50" style="fill: red;"></rect>
</svg>

WebGL

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

在canvas基础上,获取webgl绘图对象然后进行webgl的操作。

// 获取canvas元素
const canvas = document.getElementById('webgl-canvas');

// 初始化WebGL上下文
const gl = canvas.getContext('webgl');

二基于底层封装的可视化库

zrender

zrender是二维绘图引擎，是Echarts的渲染器，可以提供Canvas、SVG、VML等多种渲染方式

zrender是一个js库，封装并简化Canvas、SVG开发，参考官网 ecomfe.github.io/zrender-doc…

D3

主要用来绘制矢量图（svg）的一个js类库，简化SVG的开发首先D3的官网：d3js.org/ 也可以参考：zhuanlan.zhihu.com/p/38001672

three.js

基于WebGL的，简化WebGL开发的js类库参考教程网站：www.yanhuangxueyuan.com/threejs/doc…

HighCharts

Highcharts 系列包含 Highcharts JS，Highstock JS，Highmaps JS 共三款软件，均为纯 JavaScript 编写的 HTML5 图表库。

AntV

AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。 AntV 包括以下解决方案：

G2：可视化引擎
G2Plot：图表库
G6：图可视化引擎
Graphin：基于 G6 的图分析组件
F2：移动可视化方案
ChartCube：AntV 图表在线制作
L7：地理空间数据可视化

Echarts

ECharts一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

一 浏览器可视化解决方案中常见概念

一 可视化工具的底层实现