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";

}

Javascript画布drawImage不起作用，它没有抛出任何错误

1 个答案: