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

标签 processing.js

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

初始化脚本指定:

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

当我指定每个草图的目标 Canvas 时,它不起作用:
<script type="application/processing" target="canvas1">..</script>
<script type="application/processing" target="canvas2">..</script>

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

但它不工作?这甚至可能吗?任何帮助将非常感激。我试图让一个带有内联 Canvas 元素的文档彼此同步运行草图。

最佳答案

通过为脚本和 Canvas 标签设置 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>

关于processing.js - 如何同时运行多个 processing.js 草图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1918347/

相关文章:

javascript - 蛇游戏与自身碰撞

canvas - 是否可以创建透明 Canvas

javascript - 处理js草图不加载

math - 知道一个矩形的两个点,我怎样才能找出另外两个?

javascript - 我可以在显示窗口之外绘制一个processingJS矩形吗?

javascript - 如何让 mouseClick 找到变量并将其随机化?

javascript - processing.js 和 minim.js 中的节拍/赫兹检测不起作用

java - 处理3、图纸尺寸调整

javascript - 按键事件监听器在processing.js 中产生不一致的运动

Javascript处理.js 为什么图像不显示?