简介
two.js 是一个基于 Canvas 的 JavaScript 绘图库，可以用来创建各种 2D 图形和动画效果。它支持多种常见的图形绘制方式，例如矩形、圆形、线条等，同时也支持高级的图形变换操作，如旋转、缩放、扭曲等。此外，two.js 的 API 设计非常简单易懂，即使是前端开发新手也能够快速上手。
本文将详细介绍如何使用 npm 安装 two.js，并通过实例演示如何使用该库创建一些常见的图形效果。
安装
要使用 two.js，首先需要在项目中安装该库。可以通过命令行工具，在项目根目录下执行以下命令来完成安装：
npm install two
基本用法
创建画布
要使用 two.js 创建图形，首先需要创建一个画布。可以通过以下代码创建一个大小为 500x500 的画布：
const elem = document.getElementById('draw-shape');
const params = { width: 500, height: 500 };
const two = new Two(params).appendTo(elem);其中，elem 是指定画布的 DOM 元素，params 是参数对象，包含了画布的宽度和高度。new Two(params) 创建了一个新的 Two 实例，并将参数传递给它。最后，appendTo(elem) 将画布添加到指定的 DOM 元素中。
绘制图形
创建完画布后，就可以开始绘制图形了。two.js 支持多种方式绘制图形，例如矩形、圆形、线条等。以下是一些常见图形的绘制示例：
矩形
const rect = two.makeRectangle(100, 100, 50, 50); rect.fill = '#FF8000'; rect.stroke = 'black';
这段代码会在画布上创建一个中心坐标为 (100, 100)，宽度和高度均为 50 的矩形，并设置填充色为橙色，边框颜色为黑色。
圆形
const circle = two.makeCircle(200, 200, 25); circle.fill = 'green'; circle.stroke = 'black';
这段代码会在画布上创建一个中心坐标为 (200, 200)，半径为 25 的圆形，并设置填充色为绿色，边框颜色为黑色。
线条
const line = two.makeLine(300, 300, 400, 400); line.stroke = 'blue'; line.linewidth = 5;
这段代码会在画布上创建一个起点坐标为 (300, 300)，终点坐标为 (400, 400) 的线条，并设置颜色为蓝色，线宽为 5。
文字
const text = two.makeText('Hello, world!', 250, 250);
text.size = 24;
text.fill = 'purple';这段代码会在画布上创建一个文本对象，并设置其内容为“Hello, world!”，位置为 (250, 250)，字体大小为 24，填充颜色为紫色。
高级用法
除了基本的图形绘制外，two.js 还支持一些高级的图形变换操作，例如旋转、缩放、扭曲等。以下是一些常见的高级用法示例：
旋转
const rect = two.makeRectangle(100, 100, 50, 50); rect.fill = '#FF8000'; rect.stroke = 'black'; // 将矩形旋转 45 度 rect.rotation = Math.PI / 4;
这段代码会在画布上创建一个中心坐标为
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32869
