什么是 processing.js？
processing.js 是一个基于 Java 的编程语言 Processing 的 JavaScript 版本。它允许在 Web 页面中使用 Processing 样式的图形和动画，而无需使用 Java 插件。
通过使用 processing.js，您可以轻松创建复杂的交互式可视化效果，例如数据可视化、艺术项目、游戏等。
安装 processing.js
您可以使用 npm 安装 processing.js：
npm install processing-js
安装后，在您的 HTML 文件中添加以下标记：
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.3/processing.min.js"></script>
</head>
<body>
<canvas data-processing-sources="your_sketch.pde"></canvas>
</body>
</html>注意，您需要将 "your_sketch.pde" 替换为您想要运行的 Processing 文件的名称。
编写第一个 Processing.js 程序
下面是一个简单的示例程序，绘制一个矩形并在其中显示文本：
-- -------------------- ---- ------- ---- ------- - --------- ----- - ---- ------ - ---------------- -------- --- ---- ----- -------- ------------- ------------------ ------------ -------- ---- ----- -
保存为 "my_sketch.pde" 文件，然后将该文件放置到与 HTML 文件相同的目录下。
现在打开您的 HTML 文件，您应该看到绘制了一个矩形，并在其中显示了 "Hello, world!"。
深入学习 Processing.js
processing.js 提供了大量的功能和库，可以帮助您创建复杂的交互式可视化效果。以下列出一些获取更多信息的资源：
- processing.js 文档：http://processingjs.org/reference/
- Processing 文档：https://processing.org/reference/
- p5.js：processing.js 的另一种 JavaScript 版本，提供更多功能和灵活性：https://p5js.org/
总结
通过使用 processing.js，您可以轻松创建交互式可视化效果，而无需安装 Java 插件。本文提供了 processing.js 的简单介绍、安装和编写第一个程序的步骤，并提供了更多深入学习的资源。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34010