p5.js：在特定的 div 之上渲染 canvas 并使其不阻塞任何东西（跟随光标的声音）

Question

我正在尝试将此代码笔用于我的项目：

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

（为了使其跟随光标转到第 108 行并将此 if(mouseIsPressed){ 更改为此 if(!mouseIsPressed){ ）

但是当我将这段代码编辑到我的项目中时，它会把它放在所有内容的下面，所有现有的网站都保持不变，当你滚动到底部时，会有一个区域显示那个结果。我想让它出现在我的一个部分的顶部。那是 1.

第二个我希望它出现在特定部分的顶部后，它不会阻止现有背景并且不会阻止鼠标与该部分的交互，只需让 whisps 出现并跟随鼠标（当鼠标悬停在仅限该特定部分）。

如果您需要任何其他信息，请发表评论，我会添加。

Answer 1

我得到的解决方案非常适合我：

正如@Kevin Workman所建议的，我确实需要 parent() 功能和更多：

我使用 id="container" 创建了一个容器 (div)，然后在脚本部分我将设置函数编辑为：

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; 添加到该部分中的所有其他元素，以便在鼠标悬停它们时使它们看起来高于耳语。

对我来说，我希望它出现在我网站的第一部分，您可能希望它出现在不同的情况下，只是大多数 container 位置带有 CSS 代码和 whisps 会“关注”。

p5.js：在特定的 div 之上渲染 canvas 并使其不阻塞任何东西（跟随光标的声音）

p5.js: Render canvas on top of a specific div and make it not block anything ( whisps following cursor )

javascript

css

canvas

p5.js