为什么我必须点击两次才能在这种情况下加载我的图像？

我有这个非常简单的代码来在画布上加载图像。你能告诉我为什么我必须点击两次按钮来加载图像吗？（我使用铬）为什么我必须点击两次才能在这种情况下加载我的图像？

<!DOCTYPE html> 
<html> 
    <body> 
     <canvas id="c" width="200" height="200"></canvas> 
     <script type="text/javascript" src="T4_referencing.js"></script> 
     <input id="b" type="button" onclick="display()"></input> 
    </body> 
</html>

T4_referencing.js

function display(){ 
    var canvas=document.getElementById("c"); 
    var ctx=canvas.getContext("2d"); 

    var im = new Image; 
    im.src="T3default200x200.png"; 

    ctx.drawImage(im,0,0); 
}

谢谢！

来源

2015-10-06 Katerl3s

你用这个[小提琴]（http://jsfiddle.net/3tqe3ay8/）重现你的问题吗？ – Amessihel

@KeyDamo：这使它重复。 –

@MadaraUchiha我不会不同意你的看法。我看了一下http://stackoverflow.com/help/duplicates和其中的博客文章：“重复的问题可以有重复的答案”以及“我们喜欢（某些）愚蠢行为”。这是因为欺骗有助于找到答案。 “人们倾向于使用完全不同的词语进行询问和搜索，而且我们的报道越好，人们可以找到他们正在寻找的答案的几率就越好”。 – Katerl3s

你需要调用的drawImage图像完全加载后：

im.onload=function() { 
    ctx.drawImage(im, 0, 0); 
}

它的工作。第二次点击的原因是，该图像然后被加载（由第一次点击的要求），并采取没有网络延迟直接从内存。

来源

2015-10-06 09:42:09 andrrs

为什么我必须点击两次才能在这种情况下加载我的图像？

回答

相关问题