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