Question

可能重复：
canvas drawImage doesn't draw images the first time

我已经创建了一个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>

Answer 1

当您尝试绘制图像时，可能是图像未完全加载。当你onload = init（）{image.src =“...”;}时，image.src调用开始加载图像。如果您正在绘制画布（稍后几行），则尚未完成加载。当您重新加载页面时，它将在最后一页加载的缓存中。

编写预加载器。或者在调用init（）之前加载这些图像。

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

只有在刷新html 5和javascript中的页面后，Web应用程序才会在第一次加载时运行

1 个答案: