圖像爲什麼刷新一下才能顯示?啓動時是空白頁,這是怎麼回事?

轉載自:https://bbs.csdn.net/topics/390057728

弄了很久才用<canvas>標籤顯示出圖像來,可是啓動瀏覽器之後必須刷新一下才能看到圖像,不然就是空白的什麼都沒有。
哪裏的問題。。。。。。
[html文件]
<!DOCTYPE html>
<html>
<head><title>javascript</title>
<script type="text/javascript" src="xxxx.js"></script>
<meta http-quive="Pragma" content="no-cache">
<meta http-quive="Cache-Control" content="no-cache">
</head>
<body οnlοad="draw();">
<canvas id="canvas" width="800" height="800"></canvas>
</body>
</html>

[javascript文件]
function draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var img=new Image();
img.src="0001.png";
context.drawImage(img,50,50);
}

 


<!DOCTYPE html>
<html>
<head><title>javascript</title>
<script>
function draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var img = new Image();
img.src="http://avatar.profile.csdn.net/2/4/4/2_dadedu.jpg";
img.onload = function(){
context.drawImage(img,50,50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="800" height="800"></canvas>
</body>
</html>

img.src="http://avatar.profile.csdn.net/2/4/4/2_dadedu.jpg";
context.drawImage(img,50,50);


如果直接這樣寫,img僅請求了http這個連接
而馬上就drawImage了,這時候image可能還沒加載完畢,所以不顯示

而刷新一下(非強制刷新)就顯示出來,是因爲 這是讀取的緩存。

所以等image.onload 再drawImage

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章