离线 p5.js HTML

p5.js 是一个用于创作交互式艺术和图形的 JavaScript 库。p5.js 借鉴了 Processing 的设计理念，使其易于学习和使用。离线 p5.js HTML 可以让程序员更方便地使用 p5.js 库。

下载和安装

离线 p5.js HTML 需要在本地下载并安装。首先，您需要从 p5.js 官方网站下载最新的 p5.js 库。下载地址为：https://p5js.org/download/ 。选择压缩包的形式下载即可。

解压缩后，您可以看到一个 p5.min.js 文件，这是您需要在 HTML 文件中引入的文件。

引入 p5.js 库

在您的 HTML 文件中，您需要通过 script 标签引入下载好的 p5.js 库。代码如下：

<script src="path/to/p5.min.js"></script>

其中，path/to/ 需要替换为您下载后 p5.min.js 文件的存放路径。

创建画布

在画布上创建的所有元素都是由 p5.js 自动调用的函数生成的。您只需要定义这些函数即可。以下是一个示例，用于创建画布：

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(mouseX, mouseY, 50, 50);
}

在 setup() 函数中，您可以调用 createCanvas() 函数创建一个 400 x 400 大小的画布。在 draw() 函数中，您可以通过调用 ellipse() 函数在画布上绘制椭圆。这个椭圆会随着鼠标的移动而移动。

运行代码

要在本地运行您的代码，您只需要打开 HTML 文件并在浏览器中运行。您可以通过以下命令启动本地服务器：

python -m http.server

然后，在浏览器中访问 http://localhost:8000 即可看到您的画布和程序运行结果。

结论

本文介绍了如何使用离线 p5.js HTML，包括下载和安装 p5.js 库、引入 p5.js 库、创建画布以及在本地运行您的代码。p5.js 是一个十分强大并且易于学习使用的库，在您的下一个艺术项目中尝试使用它吧！