同一页面中的多个 p5.js 画布
Multiple p5.js Canvases in the same page
虽然我有一些处理经验，但我是新手p5.js。对于一项学术工作，我想创建一个具有多种交互体验的网站。我希望这个网站是一个单独的页面，没有链接什么都没有，只有一个滚动条。
为此，我希望在长卷轴上有多个 canvases。我还希望当用户处于正确的滚动位置时，这些交互体验才开始。我可以为我的问题想出多种解决方案，但我不确定如何实施它们，也不知道哪个是最好的。
是否可以在一页上做到这一点？能不能把canvas放到div里，然后用css顺序显示？
我想到的另一个解决方案是创建多个页面，但模拟这只是一个使用某种动画来模拟滚动的页面，这个可以保证用户总是在查看 canvas全屏，但我不确定他能用普通的滚动条控制它。
有什么简单的解决办法吗？提前致谢。
听起来您正在寻找 instance mode。
实例模式可让您完全按照您的描述进行操作：您可以创建多个草图并将它们全部添加到页面中。
您还可以使用 parent() 函数将您的 canvas 放在特定的 div 中。无耻的自我推销：here 是一个教程，其中包括将 canvas 放置在特定的 div.
在您担心卷轴之前，我会先让这些部分正常工作。但是一旦你准备好了，我会考虑在 JavaScript 中设置一个滚动侦听器并以特定值触发你的实例模式草图。
祝你好运！
虽然我有一些处理经验，但我是新手p5.js。对于一项学术工作，我想创建一个具有多种交互体验的网站。我希望这个网站是一个单独的页面，没有链接什么都没有，只有一个滚动条。
为此，我希望在长卷轴上有多个 canvases。我还希望当用户处于正确的滚动位置时，这些交互体验才开始。我可以为我的问题想出多种解决方案，但我不确定如何实施它们，也不知道哪个是最好的。
是否可以在一页上做到这一点？能不能把canvas放到div里，然后用css顺序显示？
我想到的另一个解决方案是创建多个页面，但模拟这只是一个使用某种动画来模拟滚动的页面，这个可以保证用户总是在查看 canvas全屏，但我不确定他能用普通的滚动条控制它。
有什么简单的解决办法吗？提前致谢。
听起来您正在寻找 instance mode。
实例模式可让您完全按照您的描述进行操作：您可以创建多个草图并将它们全部添加到页面中。
您还可以使用 parent() 函数将您的 canvas 放在特定的 div 中。无耻的自我推销：here 是一个教程，其中包括将 canvas 放置在特定的 div.
在您担心卷轴之前，我会先让这些部分正常工作。但是一旦你准备好了，我会考虑在 JavaScript 中设置一个滚动侦听器并以特定值触发你的实例模式草图。
祝你好运！