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

【问题标题】：How do I embed a processing sketch on my webpage using HTML?如何使用 HTML 在我的网页上嵌入处理草图？
【发布时间】：2014-06-15 19:39:18
【问题描述】：

我有一个名为test.pde 的处理草图，它与我的index.html Web 文档位于同一文件夹中。我在该文件夹中还有一个名为 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>

【问题讨论】：

标签： javascript html canvas processing

【解决方案1】：

猜测，但可能是因为您没有指定画布的大小？

尝试类似的东西

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

【讨论】：

【解决方案2】：

我也在尝试将处理草图放到网页上。

我找到了一种将代码直接放入 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 上给了我一个空白画布。希望这对你有帮助！

【讨论】：