javascript - P5 - 处理。无法同时运行和渲染多个草图

Question

我无法在一页中放置和渲染多个草图。我在开放式处理工作。由于我无法编辑它的 html 页面，因此我通过创建节点和 appendChild 将代码添加到正文中。

期望

我有一个指向下面项目的链接。但首先我将描述我希望它做什么:

• 一页有 3 个草图
• 每个草图都有自己的大小和背景颜色。
• 草图 1 填充主体尺寸并具有红色背景。
• 草图 2 为 400x400 像素，背景为绿色。
• 草图 3 为 200x200 像素，背景为蓝色。
• 导致看到 3 个堆叠的彩色形状。

当前结果

• 它只渲染最后一个草图，所以草图 3

代码

Link to the OpenPocessing Sketch

Answer 1

因为您的 iframe 太小了。当你玩 iframe 滚动条时，你可以看到 3 种颜色。提高 iframe 的宽度和高度，它们都会显示出来。

这里是之前拉大iframe的大小，注意我指出的iframe滚动条。

这里我把 style="width: 200px; height: 200px;" 改成了 style="width: 1000px; height: 1000px;"