爲什麼我必須點擊兩次才能在這種情況下加載我的圖像？

我有這個非常簡單的代碼來在畫布上加載圖像。你能告訴我爲什麼我必須點擊兩次按鈕來加載圖像嗎？（我使用鉻）爲什麼我必須點擊兩次才能在這種情況下加載我的圖像？

<!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

爲什麼我必須點擊兩次才能在這種情況下加載我的圖像？

回答

相關問題