正在处理未加载的js草图

processing js sketch not loading

本文关键字：js 草图 加载 处理      更新时间：2024-04-20

这是我的标记：

<html>
    <head>
        <script type="text/javascript" src="processing.min.js"></script>
    </head>
    <body>
        <canvas data-processing-sources="main.pde" height="500" width="700"></canvas>
    </body>
</html>

这是我的main.pde文件：

// Global variables
float radius = 50.0;
int X, Y;
int nX, nY;
int delay = 16;
// Setup the Processing Canvas
void setup(){
  size( 200, 200 );
  strokeWeight( 10 );
  frameRate( 15 );
  X = width / 2;
  Y = height / 2;
  nX = X;
  nY = Y;  
}
// Main draw loop
void draw() {
  radius = radius + sin( frameCount / 4 );
  // Track circle to new destination
  X+=(nX-X)/delay;
  Y+=(nY-Y)/delay;
  // Fill canvas grey
  background( 100 );
  // Set fill-color to blue
  fill( 0, 121, 184 );
  // Set stroke-color white
  stroke(255); 
  // Draw circle
  ellipse( X, Y, radius, radius );                  
}
// Set circle's next destination
void mouseMoved(){
  nX = mouseX;
  nY = mouseY;  
}

当页面加载时，我在控制台中收到一个错误，上面写着：

Uncaught Processing.js: Unable to load pjs sketch files: main.pde ==> File is empty.

为什么会发生这种情况？文件显然不是空的。我不知道出了什么问题，已经做了一个多小时了。请帮忙。

来自处理问题跟踪器：

.pde文件为空，因为Chrome阻止了对它的访问。对于它认为不来自同一域的所有文件，都会发生这种情况，并且本地文件将以相同的方式处理。这是一种正常的安全措施。

从processing.js快速启动：

Processing.js将在页面加载时自动扫描文档，查找具有数据处理源属性的元素，使用XMLHTTPRequest下载文件，并将其提供给Processing-to-JavaScript转换器。生成的JavaScript使用eval运行。

因此，如果您使用node.js作为html服务器，它必须为XMLHTTPRequest提供服务。

相关文章：