HTML 5画布，与背后的HTML标签交互

HTML 5 Canvas, interact with HTML tags behind it?

本文关键字：HTML 标签 交互 5画布 背后      更新时间：2024-02-16

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

我使用这个CSS来获得网站其他部分的雪效果：

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

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

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

原理相当直接。

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

演示

在这个演示中，表示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);
    }
}

（抱歉，没有snow演示，但您应该能够使用它来实现您的要求）。

相关文章：