• canvas
  • svg
  • webGL

图表类型

  1. 常用图表
  2. 信息图
  3. 地图
  4. 关系网络图
  5. 数学图形
  6. 拓扑图
  7. 流程图

canvas

画布
getContext获取 canvas上下文进行绘图
默认宽高 300 * 150

  • zrender 2d绘图引擎
  • echarts
  1. const canvas = document.getElementById('canvas');
  2. const ctx = canvas.getContext('2d'); // 3d，webgl

zrender

svg

矢量图形，放大不会失真；canvas放大会模糊，失真
svg通过 DOM方式实现绘图；canvas通过 js API实现绘图
svg DOM开销比 canvas要大
https://www.yuque.com/antv/g2-docs/tutorial-renderers

x1,y1 起始点坐标
x2,y2 结束点坐标

  1. <svg width="800" height="800">
  2.   <rect width="50" height="50" style="fill:red;stroke-width:0;stroke:rgb(0,0,0);" />
  3.   线条
  4.   <line x1="100" y1="100" x2="250" y2="75" style="stroke:blue;stroke-width:1" />
  6.   圆
  7.   <circle cx="200" cy="200" r="50" stroke="green" stroke-width="2" fill="red" />
  9.   点
  10.   <line x1="300" y1="300" x2="301" y2="301" style="stroke:red;stroke-width:1" />
  11. </svg>

webGL

WebGL 是一种 3D 绘图标准技术，把 JavaScript 和 OpenGL ES 2.0 结合在一起
通过 HTML5 的 Canvas 来和 DOM 打交道，
为HTML5 Canvas 提供硬件 3D 加速渲染。

WebGL 技术标准免去了开发网页专用渲染插件的麻烦，
可被用于创建具有复杂 3D 结构的网站页面，甚至可以用来设计 3D 网页游戏等

  1. const canvas = document.getElementById('canvas');
  2. const gl = canvas.getContext('webgl');

webGL应用场景

  • 3D 的数据可视化
  • kaspersky
  • 3D游戏开发
  • WebCam Mesh
  • webgl games
  • Cube Slam
  • 打造炫酷的交互
  • WebGL bookcase
  • H5宣传页面 & 广告
  • 淘宝双11VR邀请函 H5页面
  • 进行 3D 产品 / 物体展示
  • WebGL reflection

three.js

openGL

OpenGL 是一套规范，不是接口
学习这套规范，就可以在支持 OpenGL 的机器上正常使用这些规范，在显示器上看到绘制的结果
https://blog.csdn.net/qiwoo_weekly/article/details/102693931