Canvas 通过重叠的 HTML 元素进行交互
Canvas interaction through an overlapping HTML element
我想通过不同的 HTML 元素进行 canvas 互动。
我一直在使用 particles.js 包,并向其中添加了一个重叠的 HTML 元素。重叠元素没有背景(即 background: none
),只有一些文本。但是,重叠元素的背景仍然会阻止任何 canvas 交互。
我希望这些点在框内和框外都与光标形成连接线。
这是一个互动:
这里没有互动,我想要的地方:
可以找到一个 最小工作示例 here。
此示例改编自另一个 codepen 以清楚地显示问题。
有什么方法可以通过重叠 HTML 元素来获得交互吗?
正如评论中提到的markE。
设置 pointer-events: none
可以通过重叠元素发送 canvas 交互。
编辑: 我已将工作代码添加到最小工作示例中。只需在 css.
中取消注释即可
我想通过不同的 HTML 元素进行 canvas 互动。
我一直在使用 particles.js 包,并向其中添加了一个重叠的 HTML 元素。重叠元素没有背景(即 background: none
),只有一些文本。但是,重叠元素的背景仍然会阻止任何 canvas 交互。
我希望这些点在框内和框外都与光标形成连接线。
这是一个互动:
这里没有互动,我想要的地方:
可以找到一个 最小工作示例 here。 此示例改编自另一个 codepen 以清楚地显示问题。
有什么方法可以通过重叠 HTML 元素来获得交互吗?
正如评论中提到的markE。
设置 pointer-events: none
可以通过重叠元素发送 canvas 交互。
编辑: 我已将工作代码添加到最小工作示例中。只需在 css.
中取消注释即可