Question

我需要单击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>

Answer 1

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

这是术语loose typing和dynamic typing已知的概念（这意味着JS变量可以根据上下文在不同时间保存不同的数据类型）。所以，你没有在这里定义任何类型。

Answer 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函数;在解析草图时，Processing.js将处理函数附加到草图上，这意味着您可以稍后自己调用它。

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

2 个答案: