Repolode
提交项目
jonobr1

jonobr1/two.js

一个与渲染器无关的 Web 二维绘图 API，同一套代码可用 WebGL、Canvas 2D 或 SVG 渲染。

在 GitHub 查看官网
Star
8,698
Fork
469
未关闭 Issue
31
最近提交
4天前

这是什么？

Two.js 是一个用于在现代浏览器中创建二维图形的 JavaScript 库。开发者通过同一套 API 描述图形、文本和分组，无需修改绘图代码，就能分别使用 WebGL、Canvas 2D 或 SVG 进行渲染。

库基于场景图（scenegraph）组织对象，支持分组、变换，并可通过每帧的 update 循环实现动画。既可以用 script 标签引入压缩版本，也能通过 npm 安装，或在 React、webpack 等打包工具项目中以 ES6 模块方式导入。

配合 node-canvas 包，Two.js 还可以在 Node.js 上无界面运行，在服务端渲染场景并保存为 PNG 文件。

核心功能

  • 01同一套代码可通过 WebGL、Canvas 2D 或 SVG 渲染。
  • 02提供带分组、变换和逐帧更新的场景图。
  • 03支持 script 标签、npm 包和 ES6 模块三种引入方式。
  • 04可借助 node-canvas 在 Node.js 上无头渲染。
  • 05可自定义构建，只打包所需的渲染器以减小体积。

适用场景

  • 为网页制作交互式二维动画或动态图形。
  • 绘制需要在 SVG 与 Canvas 输出之间切换的矢量图形。
  • 在服务端生成二维场景的 PNG 图片。
  • 在 React 等基于打包工具的前端应用中加入轻量二维图形。

快速上手

  1. 1

    通过 npm 安装

    npm install --save two.js
  2. 2

    在 HTML 中引入压缩版库文件

    <script src="js/two.min.js"></script>

使用前须知

  • 完整库会导入所有模块，目前尚不支持摇树优化（tree shaking）。

标签

#2d-graphics#canvas#svg#webgl#animation#scenegraph#javascript#vector-graphics#2d#bitmap-graphics

常见问题

two.js 是什么？
一个与渲染器无关的 Web 二维绘图 API，同一套代码可用 WebGL、Canvas 2D 或 SVG 渲染。 Two.js 是一个用于在现代浏览器中创建二维图形的 JavaScript 库。开发者通过同一套 API 描述图形、文本和分组，无需修改绘图代码，就能分别使用 WebGL、Canvas 2D 或 SVG 进行渲染。
two.js 可以免费使用吗？用的什么许可证？
two.js 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
two.js 还在维护吗？
活跃维护中。two.js 最近一次提交是在 2026年11月3日。
two.js 适合用来做什么？
为网页制作交互式二维动画或动态图形。 绘制需要在 SVG 与 Canvas 输出之间切换的矢量图形。 在服务端生成二维场景的 PNG 图片。 在 React 等基于打包工具的前端应用中加入轻量二维图形。
two.js 怎么安装和运行？
通过 npm 安装: npm install --save two.js 在 HTML 中引入压缩版库文件: <script src="js/two.min.js"></script>
在哪里获取 two.js？
源代码和安装说明在 GitHub 上：https://github.com/jonobr1/two.js

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目