Canvas. Взаимодействие с dom элементами на странице

Question

[vesel4ak]

Здравствуйте, уважаемые!

Сразу скажу, что с canvas почти не знаком, но очень хочу познакомиться.

Вопрос:

Есть вот такая вот ссылка http://m-ms.dk/spaceheroes/.

Уделите, пожалуйста, 5 минут Вашего времени и посмотрите что там. Если проделать все то, что там просят, то появляется возможность с помощью их скрипта взаимодействовать (если я правильно понял) с dom элементами на любой странице.

Очень хочется узнать как они это сделали? Это нативная возможность canvas? Или canvas берет страницу и перерисовывает её "в себе" и потом работает с ней, как со своей сущностью? В какую сторону смотреть и копать?

Спасибо.

Answer 1

[Игорь Алексеенко]

В этом букмарклете канвас лежит поверх всех остальных элементов и занимает всю площадь страницы. Когда летит конфета, чтобы определить, какой DOM-элемент под ней находится, можно воспользоваться методом document.elementFromPoint(x, y) (https://developer.mozilla.org/en-US/docs/Web/API/document.elementFromPoint?redirectlocale=en-US&redirectslug=DOM%2Fdocument.elementFromPoint). А дальше уже разбить его с каким-нибудь эффектом — дело техники.

Отвечая на вопрос — canvas и остальной DOM никак не пересекаются — canvas, просто один из узлов дом-дерева, и изнутри canvas до элементов DOM никак не достучаться, но иногда это можно изящно обойти, как, например в этом случае.

Comments

[Анатолий]

Кстати таким же способом работают всякие инспекторы в браузерах и фаербаг лайт