网页2D与3D
WebGL
WebGL 是一种基于 OpenGL ES 规范的 Web 图形标准,它允许在浏览器中通过 JavaScript 直接调用 GPU 进行 2D/3D 图形渲染,无需插件,能为网页提供硬件加速的高性能可视化效果,是网页端实现复杂 3D 场景、游戏、数据可视化的底层技术基础。
OpenGL
OpenGL 是一套跨平台的开源图形编程接口(API),并非 Web 专属,它定义了一套操作图形硬件的标准,广泛应用于桌面端、移动端、嵌入式设备的 2D/3D 图形开发;WebGL 本质上是 OpenGL ES 在浏览器环境下的实现,OpenGL 是 WebGL 的核心技术源头。
Three.js
Three.js 是基于 WebGL 封装的轻量级 JavaScript 3D 库,它极大简化了 WebGL 复杂的底层操作,提供了直观的 API 来创建和渲染 3D 场景(如几何体、材质、灯光、相机),是目前网页端开发 3D 可视化、3D 游戏、3D 数据大屏最主流的工具。
Babylon.js
Babylon.js 是另一款高性能的 WebGL 3D 游戏 / 图形引擎,相比 Three.js 更侧重游戏开发场景,内置了物理引擎、音效、碰撞检测、VR/AR 支持等游戏化功能,API 设计也更贴近游戏开发逻辑,适合开发网页端 3D 游戏、交互式 3D 应用。
Canvas API
Canvas API 是 HTML5 提供的原生网页绘图接口,通过 JavaScript 在网页的 <canvas> 元素上逐像素绘制 2D 图形(如线条、图形、文本、图像),属于 CPU 渲染(无硬件加速),轻量易用,是网页端实现 2D 绘图、简单动画、数据可视化的基础技术。
Fabric.js
Fabric.js 是基于 Canvas API 封装的 2D 绘图库,扩展了 Canvas 的原生能力,提供了可交互的图形对象(如矩形、文本、图片),支持图形的拖拽、缩放、旋转、分层、序列化等功能,适合快速开发在线绘图工具、图片编辑器、可视化设计面板等场景。
Konva.js
Konva.js 同样是基于 Canvas API 的 2D 绘图库,核心优势是对图层(Layer)、舞台(Stage)、事件系统的封装极为完善,支持高性能的图形动画、多图层管理和跨设备的交互(如触摸、鼠标),适合开发交互式 2D 游戏、数据可视化图表、复杂的交互式绘图应用。 Echarts D3.js
- 国内项目、快速上手、中后台 / 数据大屏 → ECharts(首选)
- React 项目、组件化开发 → BizCharts(复杂场景)/ Recharts(简单场景)
- 复杂定制化、创意可视化 → D3.js
- 中小型项目、轻量高效、无框架依赖 → Chart.js
- 商业项目、高稳定性 / 全功能需求 → Highcharts(需考虑授权)