你如何在 html 上设置 processingJS？答案

【问题标题】：How do you setup processingJS on html?你如何在 html 上设置 processingJS？
【发布时间】：2016-08-24 02:44:48
【问题描述】：

如何在 html 页面上运行 processingJS 脚本？有人可以给我发一份测试 .html 和任何辅助代码文件让我了解一下吗？

假设我想运行这个矩形：

rect(50,50,50,50);

【问题讨论】：

标签： javascript html installation processing.js

【解决方案1】：

添加到 Kevin 的回答中，如果您想将 Processing.js 库与 javascript 而不是 pde (java) 代码一起使用，这可能会更容易深入。

*请注意，一些 javascript 人员可能会对使用 with(obj){code} 感到畏缩，但我以这个为例来整理代码并使其不那么冗长。根据具体情况自行判断。

还要确保处理库与您使用以下代码的文件位于同一文件夹中，并且以下代码中的文件名正确。

享受吧！ :)

<html>
    <head>
    </head>
    <body>
        <canvas id="output-canvas"></canvas>
        <script src="processing.1.4.8.js"></script>

<script> ( function () {

new Processing ( document.getElementById ( "output-canvas"), sketch );

function sketch ( pjs ) {

    // some initilization if you prefer

    // set the canvas size
    pjs.size ( 800, 600 );

    // ( 0, 0, 0, 0 ) - if you want a transparent sketch over some backdrop
    pjs.background ( 255, 255, 255, 255 );

    // make the ugly pjs go away
    with ( pjs ) {

        // red stroke
        stroke ( 255, 0, 0 );

        // thick border
        strokeWeight ( 5 );

        // yellow fill
        fill ( 255, 240, 0 );

        // draw a rectangle
        rect ( 50, 50, 300, 200 );

    }
}

} ) (); </script>

    </body>
</html>

【讨论】：

【解决方案2】：

你想知道的都在这个页面上：JavaScript Quick Start | Processing.js

但基本上，您需要创建一个加载 Processing.js 库的 html 文件，然后编写 Processing.js 代码并将 .pde 文件加载到该页面上的 canvas 标记中。它看起来像这样：

<!DOCTYPE html>
 <html>
 <head>
   <title>Hello Web - Processing.js Test</title>
   <script src="processing-1.3.6.min.js"></script>
 </head>
 <body>
  <h1>Processing.js Test</h1>
  <p>This is my first Processing.js web-based sketch:</p>
  <canvas data-processing-sources="hello-web.pde"></canvas>
</body>
</html>

最简单的方法是在处理编辑器中使用 JavaScript 模式（您可能必须使用 2.2.1 版本），然后单击运行。然后，您可以查看编辑器创建的文件（转到查看 > 草图文件夹）以更好地了解幕后情况。

【讨论】：