你如何在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？

回答

相關問題