Canvas 背景图像位于第二张绘制图像之上

Question

我在 canvas 中设置了背景图片；这是一张地图。

然后我想 "draw" 在地图顶部的各个点上标记红色图钉图像。现在在 Chrome 中，我 "drawn" 与上下文相关的第一个图钉出现在背景地图下方。

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

我的最终目标是让图钉具有交互性 (onMouseOver/onClick/etc)。我是否应该使用 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);
}

Canvas 背景图像位于第二张绘制图像之上

Canvas background image is on top of second drawn image

javascript

html

canvas

onload