一页上的两幅画布p5.js

Question

我正在尝试将两个画布添加到一个网页中。我想要的是拥有移动视图的画布和桌面视图的另一个画布。我正在使用p5.js库。

我设法使用媒体查询和css只显示移动画布 - 尽管桌面画布无处可见。

以下是头部中包含的脚本：

<script src="sketches/memoriesMainPage.js" type="text/javascript"></script>
<script src="sketches/memoriesColorRoad.js" type="text/javascript"></script>

我在每个草图中给出了一个特定脚本中的类，在setup（）函数中 - memoriesMainPage.js：

canvas.class("mainSketch");

移动草图 - memoriesColorRoad.js：

canvas.class("phoneSketch");

CSS：

.mainSketch {
  display: block;
 }
.phoneSketch {
  display: none;
 }

@media only screen and (max-width: 500px) {

  .phoneSketch {
    display: block;
  }
}

上面的代码适用于移动视图。默认画布始终是phoneSketch，当我在Google Inspect上检查页面时，无法找到mainSketch。

有人可以帮忙吗？