我使用processing.js创建了一个草图文件，并将其保存到一个pde文件中。我保存了processing.js源文件、html文件和sketch-pde文件，并在chrome控制台中得到以下错误：XMLHttpRequest失败，可能是由于违反了同源策略。
我觉得我的html在源代码集成方面是正确的，并且我的pde文件保存正确，所以我不确定为什么html文件没有加载草图。以下是我的文件：
hello_web.pde:
void setup() {
size(200, 200);
background(100);
stroke(255);
ellipse(50, 50, 25, 25);
println("hello web!");
}
hello_web.html：
<!DOCTYPE html>
<html>
<head>
<title>Hello Web - Processing.js Test</title>
<script src="processing-1.0.0.min.js"></script>
</head>
<body>
<h1>Processing.js Test</h1>
<p>This is my first Processing.js web-based
sketch:</p>
<canvas data-processing-sources="hello-web.pde"> .
</canvas>
</body>
</html>
谢谢！
这是因为Chrome将file:///与http(s(://区别对待，并且在本地调用其他文件的JavaScript违反了同源策略。因此，您需要在本地服务器上运行此程序，以便在地址前面有http://。你可以在他们的维基上阅读更多关于这方面的信息。
如果您希望轻松启动服务器，运行python -m http.server(假设Python 3，您可能需要运行python -m http.server(将为当前目录提供服务，因此只需导航到正确的目录并运行该命令，然后访问http://localhost将允许您从本地服务器访问文件。
除了Unsolved Cypher的答案外，请注意，您还可以将所有内容放在一个文件中，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>My Sketch</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.6.0/processing.min.js"></script>
</head>
<body>
<script type="application/processing">
void setup(){
size(200, 200);
}
void draw(){
background(64);
ellipse(mouseX, mouseY, 20, 20);
}
</script>
<canvas> </canvas>
</body>
</html>
或者你可以使用免费的网络主机，或者像CodePen这样的服务。这是我在CodePen上处理.js草图时使用的模板。
无耻的自我推销：这里有一个关于Processing.js.的教程