Web應用程序不只是在HTML 5和JavaScript刷新頁面後第一次加載運行，

可能重複：
canvas drawImage doesn't draw images the first time Web應用程序不只是在HTML 5和JavaScript刷新頁面後第一次加載運行，

我做了一個Web應用程序中，我做了一個遊戲，遊戲在第一次加載時不起作用，它只在刷新頁面時運行，在mozilla或chrome上再次啓動（即正常）。代碼如下：

<!DOCTYPE html> 

<html> 
<head> 

<script> 

function init() { 

img=new Image(); 
img.src= "Device-Android.png"; 
img1= new Image(); 
img1.src= "background.png"; 
play=new Image(); 
play.src="play.png"; 

    canvas1 = document.getElementById('canvas'); 
//alert("show");   
    if (canvas1 && canvas1.getContext) { 
     ctx = canvas1.getContext('2d'); 

ctx.drawImage(img,0,0,394,726); 
ctx.drawImage(img1,37,92,317,477); 
ctx.drawImage(play,149,300,70,40); 
//alert("show somthing"); 
ctx.font = "bold 15pt sans-serif"; 
document.onmousedown = initGame; 
    } 



} 
................ remaining functions 

</script> 


</head> 

<body onload="init();"> 

    <center> 

    <canvas id="canvas" width="387" height="700"> <h1>Memory Game</h1> </canvas> 

    </center> 
    </body> 
    </html>

來源

2012-10-05 shark

什麼問題？ – PeeHaa

@PeeHaa當我在mozilla或firefox上運行它時，我必須首次刷新頁面，但我希望它能夠運行automsticslly – shark

可能與以下問題相同：http://stackoverflow.com/questions/3850312/canvas-drawimage-doesnt -draw圖像最首次？RQ = 1 – VoidMain

這可能是您的圖片在您嘗試繪製它們時未完全加載。當你onload = init（）{image.src =「...」;}它是開始加載圖像的image.src調用。如果您立即繪製到畫布（稍後幾行），則尚未加載。當你重新加載頁面時，它會從最後一頁加載到緩存中。

寫一個預裝載程序。或者在調用init（）之前加載這些圖像。

有一個變量告訴你圖像是否加載完成。我認爲這是image.complete

來源

2012-10-06 03:18:30

Web應用程序不只是在HTML 5和JavaScript刷新頁面後第一次加載運行，

回答

相關問題