Question

如何在html页面上运行processingJS脚本？有人可以给我发送测试.html和任何辅助代码文件给我一个想法吗？

假设我想运行这个矩形：

rect(50,50,50,50);

Answer 1

您想知道的一切都在此页面上：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>

最简单的方法是使用Processing编辑器中的JavaScript模式（您可能必须使用2.2.1版本），然后单击run。然后，您可以查看编辑器创建的文件（转到查看＆gt;草图文件夹），以便更好地了解幕后的内容。

Answer 2

要添加到Kevin的答案中，如果您想使用带有javascript而不是pde（java）代码的Processing.js库，这可能会让您更容易深入了解。

*请注意，有些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>

你如何在html上设置processingJS？

2 个答案: