0

可能重复：
画布drawImage第一次不绘制图像

我制作了一个 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>
4

1 回答 1

0

当您尝试绘制它们时，可能是您的图像没有完全加载。当你 onload=init(){image.src="...";} 它是 image.src 调用开始加载图像。如果您立即绘制到画布（几行之后），它还没有完成加载。当您重新加载页面时，它会在最后一次加载页面的缓存中。

编写一个预加载器。或者在调用 init() 之前加载这些图像。

有一个变量可以告诉您图像是否已完成加载。我认为它是 image.complete

于 2012-10-06T03:18:30.150 回答