javascript - 将表单数据发送到 Canvas 中的外部 pjs 草图

Question

编辑:

我做了更多研究并弄清楚了。将 html 位更改为:

Volume: 0%<input type="range" min="0" max="1" step="0.01" value="1" onchange="Processing.getInstanceById('spaceGame').changeVolume(this.value)">100%

(显然我也给了 Canvas 一个 id)

将功能更改为:

void changeVolume(slideAmount){
    volume = slideAmount;
    alert("Volume was changed to "+volume*100+"%");//for testing
}

原始问题:

我希望当您更改 html 表单时，我的 processing.js 草图中的体积也会发生变化。不幸的是，该表单无法识别我在 Canvas 中使用的代码。我不擅长 html，我不知道如何解决这个问题。

<canvas width="600" height="600" data-processing-sources="spacegame.pde"></canvas>
<!--Later on...-->
    Volume: 0%
<input type="range" min="0" max="1" step="0.01" value="1" onchange="changeVolume(this.value)">100%

在spacegame.pde中，我有这段代码来处理表单。

function changeVolume(slideAmount){
   volume = slideAmount;
   alert("Volume was changed to "+volume*100+"%");//for testing
}

我的输入表单没有看到我的 pde 文件，因此 firebug 给了我这个错误:ReferenceError:changeVolume 未定义

请告诉我如何使输入标记识别我的 Canvas 代码。谢谢。

Answer 1

我解决了我的问题。

我做了更多研究并弄清楚了。将 html 位更改为:

Volume: 0%<input type="range" min="0" max="1" step="0.01" value="1" onchange="Processing.getInstanceById('spaceGame').changeVolume(this.value)">100%

(显然我也给了 Canvas 一个 id)

将功能更改为:

void changeVolume(slideAmount){
    volume = slideAmount;
    alert("Volume was changed to "+volume*100+"%");//for testing
}