從畫布元素外部處理Processing.js中的變量

Question

我製作了一段處理代碼，它根據在setup()中設置的參數繪製符號。

我想製作一個網頁，使用Processing.js，這將允許我從瀏覽器中的文本框中更改這些參數（所有浮動），然後重繪。

可以嗎？

Answer 1

是的，你可以。請查看the example和read the official documentation。 JSFiddle代碼：

<div id="msg">Your message!</div> 
<script> 
    var jsString = "Hello from JavaScript!"; 
    var printMessage = function(msg) { 
    document.getElementById('msg').innerHTML = "Message: " + msg; 
    }; 
    var w = 300, h = 200; 
</script> 
<script type="text/processing" data-processing-target="processing-canvas"> 
    String processingString = "Hello from Processing!"; 
    void setup() { 
    size(w, h); 
    printMessage(jsString + " " + processingString); 
    } 
</script> 
<canvas id="processing-canvas"></canvas>