你如何在html上设置processingJS？

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

比方说，我想跑这个矩形：你想知道

rect(50,50,50,50);

来源

2016-08-24 DIZAD

在这个页面上：JavaScript Quick Start | Processing.js

但基本上，你需要做的创建加载处理的HTML文件.js库，然后编写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版本），然后单击运行。然后，您可以查看编辑器创建的文件（查看>草图文件夹），以更好地了解底下发生了什么。

来源

2016-08-24 14:01:33

为了增加凯文的答案，如果你想使用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>

来源

2016-08-27 03:30:12 Nolo

你如何在html上设置processingJS？

回答

相关问题