你如何在html上设置processingJS?

时间:2016-08-24 02:44:48

标签: javascript html installation processing.js

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

假设我想运行这个矩形:

rect(50,50,50,50);

2 个答案:

答案 0 :(得分:0)

您想知道的一切都在此页面上: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;草图文件夹),以便更好地了解幕后的内容。

答案 1 :(得分:0)

要添加到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>