Two.js 技术文档

2026-01-25 06:04:01作者：蔡怀权

Two.js 是一个为现代浏览器设计的二维绘图库，它具备渲染器无关的特点，允许开发者通过同一套API在WebGL、Canvas2D和SVG上下文中进行绘制。

安装指南

直接包含（适用于网页）

访问 Two.js 最新版本链接，下载 two.min.js。

将其添加到你的HTML文件中。

<script src="路径/to/two.min.js"></script>

使用NPM（适用于Node.js项目或构建流程）

在命令行中运行：

npm install --save two.js

这样可以在你的项目中通过模块引入方式使用Two.js。

自定义编译

对于需要定制功能的场景，你需要先安装Node.js。然后，在Two.js项目目录下执行：

cd 路径/to/two.js
npm install
node ./utils/build

修改 /utils/build.js 文件来选择性包含所需渲染器以减少最终文件大小。

项目的使用说明

基本使用示例，创建并显示旋转的矩形：

<!doctype html>
<script src="js/two.min.js"></script>
<script>
var two = new Two({fullscreen: true, autostart: true}).appendTo(document.body);
var rect = two.makeRectangle(two.width / 2, two.height / 2, 50, 50);
two.bind('update', function() { rect.rotation += 0.001; });
</script>

ES6 导入方式

适合现代框架及构建系统，例如React或Vue：

import React, { useEffect, useRef } from "react";
import Two from "two.js";

function App() {
  const domElement = useRef(null);

  useEffect(() => {
    const two = new Two({ fullscreen: true, autostart: true }).appendTo(domElement.current);
    const rect = two.makeRectangle(two.width / 2, two.height / 2, 50, 50);
    two.bind("update", () => { rect.rotation += 0.001; });

    return () => {
      two.unbind("update");
      two.pause();
      domElement.current.removeChild(two.renderer.domElement);
    };
  }, []);

  return <div ref={domElement} />;
}

export default App;

API使用文档

Two.js提供了丰富的API来构建图形。以下是一些核心对象和方法的简单介绍：

Two: 主入口点，用于创建新的绘图场景。

var two = new Two({width: 640, height: 480});

makeRectangle, makeCircle等：用于生成各种形状。
```
var rect = two.makeRectangle(50, 50, 100, 100);
```
bind: 绑定更新事件。
```
two.bind('update', function() {});
```