Скрипт для интерактивных изображений (анимация мышкой)

31 Янв
2012

Добрый день. Я думаю многие пользуются HTML5 Canvas. Но пока еще никто не пробовал сделать картинку с событиями на HTML5.


HTML5 — вступление

HTML5 Canvas это единственный способ для создания интерактивных картинок. Поскольку HTML5 Canvas Context не поддерживает ни события, ни анимацию, я решил прибегнуть к использованию JavaScript на более сложном уровне.
Старые методы через миллион квадратов или фигура не всегда полезно. Поэтому начнем.

К дело

Для начала нам нужно научить JavaScript определять координаты мыши (объяснять как я не буду). Привязываем событие mouseover и mousemove к Canvas элементу. Это событие должно проверять доступность изображения. Сначала выделяем изображения, квадрат которых находится под курсором, а другие делаем недоступными. После чего мы должны проверить альфа-канал изображений. Важно сделать доступным только верхнее изображение. Остальные — отвергнуть!

Проверять мы должны не сам контекст, а buffer изображений. Мы должны создать объект с img, x, y, width, height, threshold, def, prev и buffer. По ним мы будет определять события и доступность.

Есть ли готовая библиотека?

На сегодняшний момент есть только одна библиотека, и то она в разработке. Я считаю, интерактивные картинки должны стать как часть всего HTML5 или SVG. Библиотеку разрабатываю я один.

Демо страница
Исходники

Здесь я реализовал самую сложную часть — draggable.

Вывод

Мы научились делать не только картинку с событиями через фигуру, но и более сложными методами. Мой метод работает без лагов. Я советую изучить исходный код вместо повторного чтения статьи.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх