Javascript画布drawImage不起作用，它没有发生错误

这是一个非常简单的代码，我做的，只是不工作！它没有发生错误。Javascript画布drawImage不起作用，它没有发生错误

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

来源

2015-12-08 Demandooda

“不工作”是什么意思？你没有看到任何东西吗？有些东西显示出来而其他东西不显示？此外，您还没有包含相关的HTML，因为这是潜在的问题。 – Becuzz

我改变它，以便它更清楚。谢谢。 – Demandooda

[CanvasContext2D drawImage（）issue \ [onload and CORS \]]的可能的重复（http://stackoverflow.com/questions/32880641/canvascontext2d-drawimage-issue-onload-and-cors） – Kaiido

您需要等待图像加载后才能绘制图像。为此，为图像加载事件添加事件处理程序，并将绘制代码放在那里。例如：

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

}

来源

2015-12-08 20:32:35

非常感谢！ – Demandooda

没问题 - 摔倒了，我自己在过去:) –

Javascript画布drawImage不起作用，它没有发生错误

回答

相关问题