黑色帆布代替圖片

我有一個畫布問題。比方說，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來重現問題。現在問題不是獨立的。 –

黑色帆布代替圖片

回答

相關問題