如何下载Processing.js JavaScript库？零基础新手求分步教程

别担心，我来一步步教你搞定Processing.js的下载和基础使用，完全适配零基础的新手需求～

第一步：找到正确的下载文件 #

Processing.js的代码仓库里既有未编译的源码文件，也有预编译好的可直接使用的版本，你之前看到的一堆代码是源码，我们需要找编译完成的分发文件：

• 进入Processing.js的官方代码仓库页面后，找到页面中的「dist」文件夹（这个文件夹专门存放编译好、能直接用的文件）
• 进入dist文件夹后，你会看到两个核心文件：
  • processing.js：格式化后的完整版本，代码排版整齐，可读性强，非常适合新手学习和调试
  • processing.min.js：压缩后的迷你版本，体积更小加载更快，适合正式上线的项目使用

第二步：下载文件 #

选中你需要的文件（新手推荐优先选processing.js），点击进入文件详情页：

• 在文件详情页的右上角，找到「Raw」按钮（点击它会打开文件的原始内容页面）
• 右键点击「Raw」按钮，选择「另存为」，然后在电脑上选一个专门的项目文件夹保存文件，方便后续管理和使用

第三步：验证下载是否成功 #

下载完成后，你可以打开保存的文件确认：

• 如果是processing.js，里面是排版整齐的代码，这是正常状态
• 如果是processing.min.js，里面是压缩成一行的紧凑代码，这也是正常的，并非下载出错

第四步：快速体验Processing.js的使用 #

为了让你确认库能正常工作，我们可以写一个简单的测试页面：

1. 在和processing.js同一个文件夹里，新建一个文本文件，把后缀改成.html（比如命名为my-first-sketch.html）
2. 用记事本或任意代码编辑器打开这个HTML文件，粘贴以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个Processing.js项目</title>
    <!-- 引入下载好的Processing.js文件 -->
    <script src="processing.js"></script>
</head>
<body>
    <!-- 创建一个画布元素 -->
    <canvas id="mySketch" width="400" height="400"></canvas>

    <!-- 这里写Processing代码 -->
    <script type="text/processing" data-processing-target="mySketch">
        void setup() {
            size(400, 400); // 设置画布大小
            background(240); // 设置浅灰色背景
        }

        void draw() {
            fill(random(255), random(255), random(255)); // 随机生成填充色
            ellipse(mouseX, mouseY, 60, 60); // 跟随鼠标位置画圆
        }
    </script>
</body>
</html>

3. 保存HTML文件后，双击打开它，你会看到一个400x400的画布，移动鼠标就能画出随机颜色的圆——这就说明Processing.js已经成功准备好啦！

内容的提问来源于stack exchange，提问作者ZARDJ