HTML 5 Canvas, взаимодействовать с тегами HTML за ним?

Question

Итак, у меня есть элемент холста HTML 5 поверх моего сайта, чтобы наложить эффект снега.

Я использую этот CSS, чтобы получить эффект снега на вершине остальной части сайта:

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

То, что я хотел бы сделать, это получить снег, взаимодействующий с элементами на странице. например Если он попадет в тег <p>, он остановится. Таким образом, снег постепенно набирает элементы на странице.

Как бы я это сделал? Как вы получаете расположение элементов на другом уровне с помощью Javascript?

Answer 1

Принцип довольно прямолинейный.

• Соберите элементы, которые вы хотите, чтобы взаимодействовать с
• Извлечение клиент-прямоугольник каждого, который представляет абсолютное положение каждого элемента
• Update на свитке и т.д.

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

(К сожалению, нет снега демо, но вы должны быть в состоянии использовать это, чтобы реализовать то, что вы просите).