javascript - 黑色 Canvas 代替图像

Question

我的 Canvas 有问题。比方说，1/10 的时候我在 chrome 上有黑色方 block 而不是我的图像。我的代码如下，我该如何修改它以避免这种黑色显示？

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

Answer 1

我相信您想等到图像加载。

替换:

main();

与:

mapSprite.addEventListener('load', main);