简介
p5.js 是一个基于 Processing（一个可视化编程语言和环境）的 JavaScript 库，通过它可以轻松地创建交互式图形和动画。p5.js 可以用来制作艺术、设计图形界面、数据可视化、物理模拟等应用。
本教程将带你了解如何在前端项目中使用 p5.js，并提供一些示例代码供参考。
安装
在浏览器中使用
要在浏览器中使用 p5.js，只需要在 HTML 文件中添加以下代码：
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
这将从 CDN 加载 p5.js 库文件。
在 Node.js 中使用
如果你想在 Node.js 环境中使用 p5.js，可以使用 npm 进行安装：
npm install p5
然后在代码中引入模块：
const p5 = require('p5');绘制图形
现在我们已经成功地安装了 p5.js，接下来让我们开始绘制一些简单的图形。
创建画布
首先，我们需要创建一个画布来容纳我们将要绘制的图形。
function setup() {
createCanvas(400, 400);
}这将在屏幕上创建一个 400x400 的画布。
绘制形状
现在我们可以开始绘制一些形状了。比如，让我们画一个圆：
function draw() {
background(220);
ellipse(200, 200, 50, 50);
}这将在画布上绘制一个半径为 25 的圆。
颜色和样式
p5.js 还提供了许多用于设置颜色和样式的函数。例如，下面的代码将绘制一个红色的矩形：
function draw() {
fill(255, 0, 0);
rect(50, 50, 100, 100);
}这将在画布上绘制一个大小为 100x100 的红色矩形。
交互性
p5.js 还提供了一些与用户交互的方法。例如，下面的代码将在画布上创建一个鼠标点击事件：
function mouseClicked() {
fill(random(255), random(255), random(255));
ellipse(mouseX, mouseY, 50, 50);
}每当用户单击鼠标时，它将在鼠标位置创建一个随机颜色的圆。
示例代码
以下是一个简单示例，演示了如何绘制一些基本形状并响应用户的交互操作：
-- -------------------- ---- ------- -------- ------- - ----------------- ----- - -------- ------ - ---------------- --------- -- --- -------- --- ---- ----- ------- ---- --- ------------ ---- --- ---- - -------- -------------- - ----------------- ------------ ------------- --------------- ------- --- ---- -
结论
p5.js 是一个非常强大的 JavaScript 库，可以帮助你创建漂亮而有趣的交互式图形和动画。本教程提供了一些基本的示例代码来帮助你入门。如果你想要深入了解更多功能，请查看 p5.js 的官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32632
