HTML 5 Canvas，与它背后的 HTML 标签交互？

Question

好的，所以我的网站顶部有一个 HTML 5 画布元素来覆盖雪效果。

我使用这个 CSS 来获得网站其余部分之上的雪花效果：

#snow {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

我想做的是让雪与页面上的元素进行交互。例如如果它碰到<p> 标签，它将停止。因此，雪在页面上的元素上逐渐堆积。

我该怎么做呢？如何使用 Javascript 获取不同层上元素的位置？

Answer 1

原理相当简单。

• 收集您想要与之交互的元素
• 提取每个代表每个元素绝对位置的客户端矩形
• 滚动等更新

DEMO

在这个演示中，代表 DOM 元素的红色方块是在画布上绘制的，不是由 CSS 设置的。这是为了说明原理。你可以用代码做的是使用这些矩形作为碰撞对象而不是雪。

获取我们想要交互的元素：

var elements = document.querySelectorAll('p'); /// all "P" elements

现在遍历集合并从每个集合中获取绝对边界矩形：

function getRects() {
    
    for(var i = 0; i < elements.length; i++) {

        /// get rect for this element
        rect = elements[i].getBoundingClientRect();
        
        /// use it for something, or store in an array etc.
        ctx.strokeRect(rect.left,
                       rect.top,
                       rect.width,
                       rect.height);
    }
}

（抱歉，没有雪地演示，但您应该可以使用它来实现您的要求）。