我真的很无知，现在才开始学习。所以我已经尝试了很多并且有这个...（这不起作用）请帮助。 请注意，我使用.js而不是.pde，我不知道为什么它是在画布上工作的唯一方式。
<!DOCTYPE html>
<html>
<head>
<title>Hello Web - Processing.js Test</title>
<script src="Scripts/processing-1.3.6.min.js"></script>
<script src="Scripts/processing.js"></script>
</head>
<body>
<canvas data-processing-sources="H.js" id="canvas" ></canvas>
<footer>
<input id="giro" onclick="giro()" type="button" name="giro" value="giro"/>
<SCRIPT type="text/javascript">
function giro() {
document.getElementById('canvas').setAttribute("data-processing-sources", "giro.js");
//i've also tried:
document.getElementById('canvas').data-Processing-sources="giro.js";
}
</SCRIPT>
</footer>
</body>
</html>
H.js代码：
String[] mp;
PFont Gobold;
float x, y;
float hr, vr;
String pala = "mp.length()";
void setup () {
size(innerWidth-15,innerHeight-45);
noCursor();
background (255);
textAlign(CENTER, CENTER);
hr = textWidth(pala) / 2;
vr = (textAscent() + textDescent()) / 3000;
noStroke();
// x = width / 2;
// y = height / 2;
Gobold = loadFont("Verdana-8.vlw");;
textFont (Gobold);
mp = loadStrings ("H.txt");
}
void draw () {
fill(255);
rect(0, 0, width, height);
fill(0,255,0);
for (int i = 0; i<mp.length; i++)
{
text (mp [i++], random(0,width), (mouseY));
}
}
和giro.js代码：
Ball b;
void setup()
{
size(1000, 1000);
background(100);
}
void draw()
{
background(100);
if (b==null){
b=new Ball(50,50);
}
b.update();
b.draw();
}
class Ball {
int x,y;
int yV;
int gravity;
Ball(int initX,int initY) {
x = initX;
y = initY;
yV = 1;
gravity = 1;
}
void update(){
yV += gravity;
y +=yV;
if (y>480){
yV=-20;
}
}
void draw() {
translate(width/2, height/2);
ellipse(x,y,20,20);
}
}