Добрый день. Я думаю многие пользуются HTML5 Canvas. Но пока еще никто не пробовал сделать картинку с событиями на HTML5.
HTML5 Canvas это единственный способ для создания интерактивных картинок. Поскольку HTML5 Canvas Context не поддерживает ни события, ни анимацию, я решил прибегнуть к использованию JavaScript на более сложном уровне.
Старые методы через миллион квадратов или фигура не всегда полезно. Поэтому начнем.
Для начала нам нужно научить JavaScript определять координаты мыши (объяснять как я не буду). Привязываем событие mouseover и mousemove к Canvas элементу. Это событие должно проверять доступность изображения. Сначала выделяем изображения, квадрат которых находится под курсором, а другие делаем недоступными. После чего мы должны проверить альфа-канал изображений. Важно сделать доступным только верхнее изображение. Остальные — отвергнуть!
Проверять мы должны не сам контекст, а buffer изображений. Мы должны создать объект с img, x, y, width, height, threshold, def, prev и buffer. По ним мы будет определять события и доступность.
На сегодняшний момент есть только одна библиотека, и то она в разработке. Я считаю, интерактивные картинки должны стать как часть всего HTML5 или SVG. Библиотеку разрабатываю я один.
Демо страница
Исходники
Здесь я реализовал самую сложную часть — draggable.
Мы научились делать не только картинку с событиями через фигуру, но и более сложными методами. Мой метод работает без лагов. Я советую изучить исходный код вместо повторного чтения статьи.
HTML5 — вступление
HTML5 Canvas это единственный способ для создания интерактивных картинок. Поскольку HTML5 Canvas Context не поддерживает ни события, ни анимацию, я решил прибегнуть к использованию JavaScript на более сложном уровне.
Старые методы через миллион квадратов или фигура не всегда полезно. Поэтому начнем.
К дело
Для начала нам нужно научить JavaScript определять координаты мыши (объяснять как я не буду). Привязываем событие mouseover и mousemove к Canvas элементу. Это событие должно проверять доступность изображения. Сначала выделяем изображения, квадрат которых находится под курсором, а другие делаем недоступными. После чего мы должны проверить альфа-канал изображений. Важно сделать доступным только верхнее изображение. Остальные — отвергнуть!
Проверять мы должны не сам контекст, а buffer изображений. Мы должны создать объект с img, x, y, width, height, threshold, def, prev и buffer. По ним мы будет определять события и доступность.
Есть ли готовая библиотека?
На сегодняшний момент есть только одна библиотека, и то она в разработке. Я считаю, интерактивные картинки должны стать как часть всего HTML5 или SVG. Библиотеку разрабатываю я один.
Демо страница
Исходники
Здесь я реализовал самую сложную часть — draggable.
Вывод
Мы научились делать не только картинку с событиями через фигуру, но и более сложными методами. Мой метод работает без лагов. Я советую изучить исходный код вместо повторного чтения статьи.