黑色帆布代替图片

我有一个画布问题。比方说，1/10的时候，我在黑色方块上代替了我的图片。我的代码如下，我如何修改它以避免黑色显示？黑色帆布代替图片

<canvas id="Canvas" width="954" height="267"></canvas> 

<script> 

var canvas = document.getElementById('Canvas'); 
var context = canvas.getContext("2d"); 

// Map sprite 
var mapSprite = new Image(); 
mapSprite.src = 'image.png'; 

var main = function() { 
    draw(); 
}; 

var draw = function() { 
    // Clear Canvas 
    context.fillStyle = "#000"; 
    context.fillRect(0, 0, canvas.width, canvas.height); 

    // Draw diagramme 
    context.drawImage(mapSprite, 0, 0, 954, 267); 
} 

main(); 
</script>

编辑1：全功能抽奖：

var draw = function() { 
    // Clear Canvas 
    context.fillStyle = "#000"; 
    context.fillRect(0, 0, canvas.width, canvas.height); 

    // Draw diagramme 
    context.drawImage(mapSprite, 0, 0, nextWidth, nextHeight); 

    //draw all precedent cross 
    cross = new Image(); 
    cross.src = "cross.png"; 

    for (var i = 0; i < array_x.length; i++) { 
    context.drawImage(cross, array_x[i], array_y[i], 10, 10); 
    } 
}

来源

2017-09-24 ranell

等待图像加载？做'mainSprite.onload = main'而不是'main（）'，在末尾 – towc

我相信要等到图像加载。

替换：

main();

有了：

mapSprite.addEventListener('load', main);

来源

2017-09-24 19:37:00

感谢这个答案。这似乎解决了图像问题。实际上，我的功能有点复杂（编辑1）。我有2个包含坐标的数组，并且想要在图像上绘制它们。随着你的解决方案，我有我的形象，但现在，我没有我的坐标（十字）。 – ranell

@ranell我已经回答了这个问题。如果你有一个新的 - 创建一个新的问题。建议：创建jsfiddle来重现问题。现在问题不是独立的。 –

黑色帆布代替图片

回答

相关问题