p5.js：在特定 div 的頂部渲染 canvas 並使其不阻塞任何內容（在 cursor 之后發出提示）

Question

我正在嘗試將此代碼筆用於我的項目：

https://codepen.io/scorch/pen/QQxEdr

（為了使其遵循 cursor go 到第 108 行並將if(mouseIsPressed){更改為此if(!mouseIsPressed){ )

但是當我將這些代碼編輯到我的項目中時，它會將其放在所有內容的下方，所有現有網站都保持不變，當您滾動到底部時，會出現一個顯示該結果的區域。 我想讓它出現在我的一個部分的頂部。 那是1。

其次，我希望它出現在特定部分的頂部之后，它不會阻止現有背景，也不會阻止鼠標與該部分的交互，只需讓 whisps 出現並跟隨鼠標（當鼠標 hover 僅在該特定部分上時） .

如果您需要任何其他信息，請發表評論，我會添加它。

Answer 1

我得到的解決方案非常適合我：

正如@Kevin Workman建議的那樣，我確實需要parent() function 等：

我創建了一個 id="container" 的容器（div），然后在腳本部分中我將設置 function 編輯為：

function setup() {
  (1) var canvas = createCanvas(window.innerWidth, window.innerHeight);
  (2) canvas.parent('container');
  frameRate(conf.FRAME_RATE)
  pos = {x: Math.random() * window.innerWidth + 1, y:Math.random() * window.innerHeight + 1}
}

編輯的行是 (1) 和 (2)。 這將使代碼中的 whisps 位於 div 或現有 html 內的任何容器中。

我希望它將在現有元素之上而不中斷鼠標事件，因此我還將此代碼添加到我的 CSS 文件中：

.container{
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
}

我添加了z-index: 2; 將所有 rest 的元素放在該部分中，以使它們在鼠標 hover 時看起來在耳語之上。

對我來說，我希望它出現在我網站的第一部分，您可能希望它在不同的情況下，只是大多數帶有 CSS 代碼的container position 和耳語將“跟隨”。