从canvas元素外部处理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>