Можно ли рисовать линии поверх изображения "gif", используя функцию <canvas>?

Question

Мне трудно рисовать линии поверх загруженного изображения "map.gif".

В основном я загрузил небольшую контурную карту и использую функцию "область" для создания определенных областей (городов)., дороги и т. д.).Когда я нажимаю на город, появляется всплывающее окно со словом «эй, вы просто нажимаете на Даллас» (или где-либо еще).Все это прекрасно работает.

Моя проблема в том, что моя карта на самом деле представляет собой пустой контур, на котором не нарисованы реальные города или дороги.

Поэтому я попытался использовать функцию "холст" дляНарисуйте города (круги) и дороги (линии).

Единственная проблема состоит в том, что они появляются под картой, а не поверх нее.

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

Большое спасибо,

Пит

Answer 1

Возможно, вам просто нужно попробовать поиграть со значениями z-index CSS изображения и холста. Убедитесь, что вы установили прозрачный холст.

Другая возможность - заменить изображение на холст (или просто загрузить изображение на холсте для начала). Некоторые советы по использованию изображений с холстом можно найти здесь .

Answer 2

Я бы загружал gif прямо в память холста, а затем делал все остальное внутри самого холста.

GIF не анимирован, верно?

Некоторые ссылки на загрузку:https://developer.mozilla.org/en/Canvas_tutorial/Using_images