processing.js canvas没有渲染任何东西，为什么？

Question

我正在实施第一种方法，如http://processingjs.org/learning/所述。

我的代码是：

Anything.html

<script src="processing.js"></script> 
<canvas data-processing-sources="anything.pde"></canvas> 

Anything.pde

void setup()
{
  size(200,200);
  background(125);
  fill(255);
  noLoop();
  PFont fontA = loadFont("courier");
  textFont(fontA, 14);  
}

void draw(){  
  text("Hello Web!",20,20);
  println("Hello ErrorLog!");
}

网页浏览器屏幕没有显示任何内容

为什么我没有看到画布？有什么问题？

在顶部提到的网站中注意到的第二种方法效果很好。

第二个方法代码：

 <script src="processing.js"></script>
 <script type="text/processing" data-processing-target="mycanvas">
 void setup()
 {
   size(200,200);
   background(125);
   fill(255);
   noLoop();
   PFont fontA = loadFont("courier");
   textFont(fontA, 14);  
 }

 void draw(){  
   text("Hello Web!",20,20);
   println("Hello ErrorLog!");
 }
 </script>
 <canvas id="mycanvas"></canvas>

Web浏览器输出：

Answer 1

我以同样的方式尝试了代码，并遇到了与Chrome相同的问题。它确实适用于Firefox。这是一个有趣的问题，特别是因为它被显示为一个优选的基本例子。

我捅了一下试图让它发挥作用。我发现使用datasrc =“anything.pde”的格式略有不同，只有Firefox工作才能找到相同的结果。

我尝试使用etc标签在正确格式化的页面内跳转命令。它没有帮助。

我在How do I include a JavaScript file in another JavaScript file?

作为初学者发现了一个相当复杂的讨论

我希望找到一种简单的方法来使附加文件正常工作。我建议坚持使用第二种方法。这就是我要做的。