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

我需要单击一个HTML按钮并更改processing.js中的值。这似乎是这将是简单的，但有些事是错在这里：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>

来源

2011-09-18 Roger

变化int color = 80;到var color = 80;和
<script type="application/processing">到<script type="text/javascript">
，你应该是不错的。

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

来源

2011-09-18 18:54:13 Saket

谢谢Saket，这很有道理。但我试过了，它不起作用。我认为还有一个额外的问题。 – Roger

哦，我编辑了我的回复以进行额外的更改（脚本标记）。请注意。 – Saket

我并不是说这个脚本标记是错误的，我是说我不相信它是正确的。 processingjs.org网站的示例遵循我使用的脚本标记格式。 Fwiw，大部分的脚本（几百行）都是用Java编写的，其中有一些javascript行可以正常工作（例如，document.getElementById ...）。 – Roger

得到这个工作，改变你的草图功能：

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.instances数组引用它。
你命名color会踩在脚下称为color()的处理API函数变量，所以我改变了你的变量
我改变你的JavaScript函数来处理函数的名称; Processing.js将处理函数附加到草图上，这意味着您可以稍后调用它。

来源

2011-11-01 03:14:30

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

回答

相关问题