DEMO

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);
    }
}

（对不起，没有雪地演示，但你应该能够用它来实现你的要求）。

HTML 5 Canvas，与HTML标签交互吗？

1 个答案:

DEMO