帆布背景图像是在第二个绘制图像

Question

我有一个背景图像设置在我的画布上;这是一张地图。

然后我想要在地图顶部的各个点上“绘制”红色针图像。现在在Chrome中，我已经根据上下文“绘制”了第一个引脚，它将出现在背景地图下方。

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

我的最终游戏是我希望引脚是互动的（onMouseOver/onClick/etc）。我甚至应该使用画布元素来做到这一点？下面

见代码：

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