同一页面中的多个 p5.js 画布

Question

虽然我有一些处理经验，但我对 p5.js 很陌生。对于学术工作，我想创建一个具有多种交互体验的网站。我希望这个网站是一个单页，没有链接，什么也没有，只有一个卷轴。为此，我希望沿着长卷轴有多个画布。我还希望这些交互体验在用户处于滚动的正确位置时才开始。我可以为我的问题想出多种解决方案，但我不知道如何实施它们，也不知道什么是最好的。是否可以用一页来做到这一点？是否可以将canvas放入div中，然后用css按顺序显示？我想到的另一种解决方案是创建多个页面，但模拟这只是一个使用某种动画来模拟滚动的页面，这个解决方案将保证用户始终以全屏方式查看画布，但我不确定他是否可以用普通的滚动条来控制它。有什么简单的解决办法吗？提前致谢。

Answer 1

听起来您正在寻找实例模式。

实例模式可让您准确地执行您所描述的操作：您可以创建多个草图并将它们全部添加到页面中。

您还可以使用该parent()函数将画布放入特定的 div 中。

在你担心卷轴之前，我会先让这些部件正常工作。但是一旦你准备好了，我会考虑在 JavaScript 中设置一个滚动监听器，并在某些值触发你的实例模式草图。

祝你好运！