processing.js，通过表单按钮访问？答案

【问题标题】：processing.js, access via form button?processing.js，通过表单按钮访问？
【发布时间】：2011-09-18 18:48:10
【问题描述】：

我需要单击 HTML 按钮并更改 processing.js 中的值。这似乎很简单，但这里有问题：

<!DOCTYPE html>
<html>
<head>
    <script src="../../processing.js"></script>
</head>
<body>

<script type="application/processing">
int color =80;
void setup() {
  size(200, 200);
  stroke(255);
}
void draw() {
  background(0);
  fill(color);
  ellipse(100, 100, 160, 160);
}

function changeColor(newColor){
    color = newColor;
}
</script>
<canvas width="200" height="200"></canvas></p>
<div style="height:0px;width:0px;overflow:hidden;"></div>

<button onClick="changeColor(150)">Change Color</button>
</body>
</html>

【问题讨论】：

标签： javascript html processing.js

【解决方案1】：

将int color = 80; 更改为var color = 80; 和
<script type="application/processing"> 更改为<script type="text/javascript">
你应该很好。

这是术语loose typing 和dynamic typing 所熟知的概念（这意味着一个JS 变量可以根据上下文在不同时间保存不同的数据类型）。因此，您无需在此处定义任何类型。

【讨论】：

感谢 Saket，这是有道理的。但我试过了，但没有用。我认为还有一个问题。
哦，我编辑了我的回复以进行额外的更改（脚本标签）。请注意。
我并不是说关于脚本标签是错误的，...我是说我不相信它是正确的。 processingjs.org 站点的示例遵循我使用的脚本标记格式。 Fwiw，大部分脚本（几百行）是用 Java 编写的，偶尔会抛出一个运行良好的 JavaScript 行（例如，document.getElementById...）。

【解决方案2】：

要使其正常工作，请将您的草图功能更改为：

int myColor = 80;
void changeColor(newColor) {
  myColor = newColor;
}

将您的按钮代码更改为以下内容：

<button onClick="Processing.instances[0].changeColor(150)">
  Change Color
</button>

之前没用的原因是

浏览器不会执行<script> 块中的代码，除非它有type="text/javascript'。因此，与普通的 JavaScript 块不同的是，changeColor 函数不是页面的全局函数。
由于该函数不是全局的，因此需要通过 Processing 实例引用它，使用 Processing.instances 数组。
您名为 color 的变量会踩到名为 color() 的处理 API 函数，因此我更改了您的变量名称
我将您的 JavaScript 函数更改为处理函数； Processing.js 在解析时将处理函数附加到草图中，这意味着您可以稍后自己调用它。

【讨论】：