Фоновое изображение холста находится поверх второго нарисованного изображения

У меня есть фоновое изображение, установленное на моем холсте; это карта.

Затем я хочу «нарисовать» изображения красной булавки в разных точках поверх карты. Прямо сейчас в Chrome первая булавка, которую я «нарисовал» с контекстом, появляется под фоновой картой.

Я не вижу такого поведения с Firefox/IE.

Моя конечная цель заключается в том, что я хочу, чтобы контакты были интерактивными (onMouseOver/onClick/и т. д.). Должен ли я даже использовать элемент холста для этого?

См. код ниже:

<canvas id="backgroundMapCanvas" width="990" height="691" style="border:1px solid #d3d3d3;">
</canvas>

<script type="text/javascript">
    var context = document.getElementById("backgroundMapCanvas").getContext("2d");

    var bgImage = new Image();
    bgImage.src = "images/mapBackground.jpg";

    bgImage.onload = function() {
        context.drawImage(bgImage, 10, 10);
    };

    var firstPin = new Image();
    firstPin.src = "images/redPin.png";

    firstPin.onload = function() {
        context.drawImage(firstPin, 830, 420);
    };
</script>

Спасибо,

V


javascript canvas html onload
person azadvirat    schedule 03.05.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Порядок загрузки не гарантируется, так как он зависит от размера изображения, сервера и т. д., поэтому вам необходимо установить правильный порядок, и это можно сделать, отслеживая статус загрузки для всех изображений и затем рисуя изображения в порядок, который вы намеревались:

  • Поделиться обработчиком загрузки
  • Использовать счетчик
  • Рисуйте, когда все изображения загружены.

Пример:

var bgImage = new Image();
var firstPin = new Image();
var count = 2;

bgImage.onload = loader;
firstPin.onload = loader;

bgImage.src = "images/mapBackground.jpg";
firstPin.src = "images/redPin.png";

function loader() {
    if (!--count) draw();   // draw when both has loaded
}

function draw() {
    context.drawImage(bgImage, 10, 10);
    context.drawImage(firstPin, 830, 420);
}
person Community    schedule 03.05.2015
comment
Что, если я просто хочу сделать фоновое изображение статичным? Порядок розыгрыша всех последующих кеглей значения не имеет. - person azadvirat; 03.05.2015
comment
@azadvirat, вы можете установить фоновое изображение с помощью CSS для элемента холста и просто рисовать булавки, используя контекст. Просто обратите внимание, что если вы планируете сохранить холст как изображение позже, фон CSS не будет включен. - person ; 03.05.2015
comment
Установка основного изображения карты в качестве фонового изображения CSS при рисовании изображений булавок поверх карты, похоже, работает достаточно хорошо. Спасибо! - person azadvirat; 03.05.2015