Question

我有一个名为test.pde的处理草图，它与我的index.html网络文档位于同一文件夹中。我在该文件夹中也有一个名为processing.min.js的文件。我正在努力使我的处理草图出现在我的网站上。

这是我现在的代码，但它只会使得到的网站空白：

<!DOCTYPE html>
<html>
    <head>
        <title>Yaxlat</title>
        <link rel="stylesheet" type="text/css" href="websitestyle.css">
        <script src="processing.min.js"></script>
    </head>
    <body>
        <canvas data-processing-sources="test.pde"></canvas> 
    </body>
</html>

Answer 1

狂野猜测，但也许是因为你没有指定画布的大小？

尝试类似

的内容

<canvas width="640" height="360"></canvas>

Answer 2

我也试图将Processing sketch放到网页上。

我找到了将代码直接放入HTML文件的方法。当我在浏览器中从计算机打开本地文件时，它甚至可以正常工作。

尝试在此处替换您的代码：

<html>
<head>
    <title>Mouse2D \ Examples \ Processing.org</title>

    <!-- script type="text/javascript" src="/_ah/channel/jsapi"></script -->
    <script src="processing.js" type="text/javascript"></script>    
    <!-- script src="http://processing.org/javascript/modernizr-2.6.2.touch.js" type ="!text/javascript"></script -->
</head>

<body>
    <label>once</label>
    <br>
    <div class="proc">
    <script type="application/processing"> 
    void setup() 
    {
      size(640, 360);
      noStroke();
      rectMode(CENTER);
    }

    void draw() 
    {   
      background(51); 
      fill(255, 204);
      rect(mouseX, height/2, mouseY/2+10, mouseY/2+10);
      fill(255, 204);
      int inverseX = width-mouseX;
      int inverseY = height-mouseY;
      rect(inverseX, height/2, (inverseY/2)+10, (inverseY/2)+10);
    }

    </script>
    <canvas width="640" height="360"></canvas>
    <div>this is below the canvas</div>


</body>

我的问题是，虽然这在本地工作，但它在我的Google App Engine上给了我一个空白画布。希望这对你有所帮助！

如何使用HTML在我的网页上嵌入处理草图？

2 个答案: