Turtle 是一款基于 Canvas API 的 JavaScript 库，可用于创建艺术和动画。P.turtle 是对 Turtle 的封装，使其更方便地在浏览器中使用。本文将介绍如何使用 npm 包 p.turtle 以及应用它创建绚丽的图形和动画。
安装
使用 npm 安装 p.turtle：
npm install p.turtle
使用方法
引入 p.turtle：
import Turtle from "p.turtle";
使用 Turtle 实例：
const turtle = new Turtle(480, 320);
其中，参数分别为 Canvas 的宽度和高度。这里我们以 480 x 320 的 Canvas 为例。
调用 Turtle 实例的 API 来创建图形和动画。
API
基本 API
Turtle.penDown()
放下画笔，开始绘制。
turtle.penDown();
Turtle.penUp()
收起画笔，停止绘制。
turtle.penUp();
Turtle.moveTo(x, y)
将画笔移动至点 (x, y)，不绘制。
turtle.moveTo(50, 50);
Turtle.turn(angle)
将画笔旋转 angle 度，正数表示逆时针转动，负数则表示顺时针。
turtle.turn(90);
Turtle.forward(distance)
将画笔向前移动 distance 像素，同时绘制路径。
turtle.forward(50);
Turtle.back(distance)
将画笔向后移动 distance 像素，同时绘制路径。
turtle.back(50);
高级 API
Turtle.polygon(n, length)
绘制一个边长为 length 、边数为 n 的多边形。
turtle.polygon(3, 50); // 绘制三角形 turtle.polygon(4, 50); // 绘制正方形 turtle.polygon(5, 50); // 绘制五边形
Turtle.star(n, length)
绘制一个边长为 length 、角度为 (180 * (n - 2) / n) 的几何图形。
turtle.star(5, 50); // 绘制五角星 turtle.star(6, 50); // 绘制六角星 turtle.star(7, 50); // 绘制七角星
Turtle.tree(depth, length)
绘制一棵树，根节点长度为 length，子节点长度为 0.7 * length，并递归绘制子节点，最大递归深度为 depth。
turtle.tree(6, 80);
示例
使用 p.turtle 创建一个渐变色彩的矩形。
<canvas id="canvas"></canvas>
-- -------------------- ---- ------- ------ ------ ---- ----------- ----- ------ - ---------------------------------- ----- --- - ------------------------ ------------ - ---- ------------- - ---- ----- ------ - --- -------------------- --------------- ----- ------ - ------- --------- --------- -------- ------- ---------- ---------------- --- ----------------- --- ---- - - -- - - -------------- ---- - ------------ - ---------- ----------------------------- ---------------- ---------------------------- - --------------- ---------------- - --------------- ---------------------------- -- ---
效果如下：
结语
p.turtle 是一款非常有趣且实用的库，它能够帮助我们快速创建图形和动画。本文介绍了 p.turtle 的基本使用方法和高级 API，并附带了一些示例代码，可以帮助读者更快掌握 p.turtle 的使用。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664b81e8991b448e26c8