Question

这是我的标记：

<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.

为什么会这样？该文件显然不是空的。我不知道出了什么问题，并且已经在这里待了一个多小时。请帮忙。

Answer 1

来自processing issue tracker：

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

来自processing.js quickstart：

Processing.js将在页面加载时自动扫描具有data-processing-sources属性的元素的文档，使用XMLHTTPRequest下载文件，并将它们提供给Processing-to-JavaScript转换器。生成的JavaScript使用eval运行。

因此，如果您将node.js用作html服务器，则它必须提供XMLHTTPRequests。

处理js草图不加载

1 个答案: