代码之家 › 专栏 › 技术社区 › Corban Brook

如何同时运行多个processing.js草图

processing.js

5

Corban Brook · 技术社区 · 16 年前

我试图在同一页上运行多个草图。

/*
* This code searches for all the <script type="application/processing" target="canvasid">
* in your page and loads each script in the target canvas with the proper id.
* It is useful to smooth the process of adding Processing code in your page and starting
* the Processing.js engine.
*/

<script type="application/processing" target="canvas1">..</script>
<script type="application/processing" target="canvas2">..</script>

<canvas id="canvas1".. />
<canvas id="canvas2".. />

但它不起作用?这可能吗?任何帮助都将不胜感激。我正在尝试让一个包含内联画布元素的文档运行一个彼此同步的草图。

2 回复 | 直到 16 年前

1

7

Corban Brook 16 年前

通过为脚本和画布标记设置ID,使其正常工作:

<script type="application/processing" id="script1">..</script>
<script type="application/processing" id="script2">..</script>

<canvas id="canvas1" width="200px" height="200px"></canvas>
<canvas id="canvas2" width="200px" height="200px"></canvas>
<script>
  canvas1 = document.getElementById("canvas1");
  script1 = document.getElementById("script1").text;
  canvas2 = document.getElementById("canvas2");
  script2 = document.getElementById("script2").text;
  Processing(canvas1, script1);
  Processing(canvas2, script2);
</script>

2

0

C.Neal 13 年前

我无法让上面的实现工作,但这对我来说是可行的。。。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <script src="processing-1.4.1.min.js"></script>
        <title>title</title>
    </head>
    <body>

        <script type="application/processing" id="script1" src="script1.pde" data-processing-target="pjs1"></script>
        <canvas id="pjs1"> </canvas>

        <script type="application/processing" id="script2" src="script2.pde" data-processing-target="pjs2"></script>
        <canvas id="pjs2"> </canvas>

    </body>
    </html>

制作“script1.pde”&script2.pde“一个正常运行的处理程序,存储在与html页面相同的目录中。