Здравствуйте, уважаемые!
Сразу скажу, что с canvas почти не знаком, но очень хочу познакомиться.
Вопрос:
Есть вот такая вот ссылка http://m-ms.dk/spaceheroes/.
Уделите, пожалуйста, 5 минут Вашего времени и посмотрите что там. Если проделать все то, что там просят, то появляется возможность с помощью их скрипта взаимодействовать (если я правильно понял) с dom элементами на любой странице.
Очень хочется узнать как они это сделали? Это нативная возможность canvas? Или canvas берет страницу и перерисовывает её "в себе" и потом работает с ней, как со своей сущностью? В какую сторону смотреть и копать?
Спасибо.
В этом букмарклете канвас лежит поверх всех остальных элементов и занимает всю площадь страницы. Когда летит конфета, чтобы определить, какой 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 никак не достучаться, но иногда это можно изящно обойти, как, например в этом случае.
Простой
Средний
Простой
