同一頁面中有多個 p5.js 畫布

Question

雖然我有一些處理經驗，但我是 p5.js 的新手。 對於學術工作，我想創建一個具有多種交互體驗的網站。 我希望這個網站是一個頁面，沒有鏈接，沒有任何東西，只有一個滾動。

為此，我希望在長卷軸上有多個畫布。 我還希望當用戶處於滾動的正確 position 時才開始這些交互體驗。 我可以為我的問題想出多種解決方案，但我不確定如何實施它們，也不知道什么是最好的。

是否可以用一頁來做到這一點？ 是否可以將 canvas 放入 div 中，然后與 css 一起按順序顯示？

我想到的另一種解決方案是創建多個頁面，但模擬這只是一個使用某種 animation 來模擬滾動的方法，這可以保證用戶始終全屏查看 canvas，但我不確定他是否可以使用正常的滾動條來控制它。

有沒有簡單的解決方案？ 提前致謝。

Answer 1

聽起來您正在尋找instance mode 。

實例模式可讓您完全按照您的描述進行操作：您可以創建多個草圖並將它們全部添加到頁面中。

您還可以使用parent() function 將 canvas 放在特定的 div 中。 無恥的自我推銷：這是一個教程，其中包括將 canvas 放在特定的 div 中。

在您擔心卷軸之前，我會先讓這些部分正常工作。 但是一旦你准備好了，我會考慮在 JavaScript 中設置一個滾動偵聽器，並以某些值觸發你的實例模式草圖。

祝你好運！