Javascript canvas drawImage無法正常工作，並且沒有引發任何錯誤

Question

這是我編寫的非常簡單的代碼，但是沒有用！ 它沒有拋出任何錯誤。

window.onload = function() {
    var canvas = document.getElementById("paper");

    var bob = canvas.getContext("2d");
    var background = canvas.getContext("2d");

    background.fillStyle = "rgb(0, 0, 0)"
    background.fillRect(0, 0, 400, 400);

    var bobImg = new Image();
    bobImg.src = "Drawing (1).png";

    bob.drawImage(bobImg, 35, 35, 400, 400);
}

它應該可以正常工作，並且與我編寫的其他程序有類似的問題。 它只是顯示黑色背景，而不顯示圖像。 謝謝大家的幫助！ = D

Answer 1

您需要等待圖像加載后才能繪制圖像。 為此，為圖像加載事件添加事件處理程序，然后在其中放置繪制代碼。 例如：

window.onload = function() {
    var canvas = document.getElementById("paper");

    var bob = canvas.getContext("2d");
    var background = canvas.getContext("2d");

    background.fillStyle = "rgb(0, 0, 0)"
    background.fillRect(0, 0, 400, 400);

    var bobImg = new Image();
    bobImg.addEventListener("load", function() {
        bob.drawImage(bobImg, 35, 35, 400, 400);
    }, false);
    bobImg.src = "Drawing (1).png";

}