javascript - Canvas 背景图像位于第二个绘制图像的顶部

Question

我在 Canvas 中设置了背景图像；这是一张 map 。

然后我想在 map 顶部的各个点上“绘制”红色图钉图像。现在在 Chrome 中，我用上下文“绘制”的第一个图钉出现在背景 map 下方。

我在 Firefox/IE 中没有看到这种行为。

我的最终目标是我希望引脚能够交互(onMouseOver/onClick/等)。我是否应该使用 Canvas 元素来执行此操作？

参见下面的代码:

<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

Answer 1

无法保证加载顺序，因为它取决于图像的大小、服务器等，因此您需要强制执行正确的顺序，这可以通过跟踪所有图像的加载状态来完成，然后然后绘制按您想要的顺序排列图像:

• 共享负载处理程序
• 使用计数器
• 加载完所有图像后进行绘制。

示例:

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);
}