图像高度显示0，requestAnimationFrame（）；javascript html5游戏

我在编一个游戏

我有以下设置：

HTML

game.HTML

      <canvas id="canvas" width="288" height="512"></canvas>

             <script src="game.js"></script>

问题

如果我设置了一个显示图像高度的警报，它在前两个或三个警报期间显示

0

，然后开始显示实际高度

---

为什么会发生这种情况？我该如何解决这个问题？我认为这意味着游戏开始时图像未完全加载？

是的，您是对的，游戏开始时图像未完全加载。要解决此问题，您只需使用“加载”事件：

var文档；
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
//加载图像
var pipeNorth=新图像（）；
pipeNorth.src=“images/pipeNorth.png”；
函数绘图（）{
/*代码*/
警报（北风管高度）；
请求动画帧（绘制）；
}
addEventListener（“加载”，函数（）{
//此函数将在图像完全加载时执行
draw（）；
});是的，您是对的，游戏开始时图像未完全加载。要解决此问题，您只需使用“加载”事件：


var文档；
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
//加载图像
var pipeNorth=新图像（）；
pipeNorth.src=“images/pipeNorth.png”；
函数绘图（）{
/*代码*/
警报（北风管高度）；
请求动画帧（绘制）；
}
addEventListener（“加载”，函数（）{
//此函数将在图像完全加载时执行
draw（）；
});根据我的经验，发生这种情况是因为文档呈现需要一些时间。我在这种情况下的技巧是延时：

function draw(){
    var delay = 200;//Your delay in milliseconds
    setTimeout(function(){
        /*code */
        alert(pipeNorth.height);
        requestAnimationFrame(draw);
    },delay);
}

它对您有用吗？
根据我的经验，发生这种情况是因为文档呈现需要一些时间。我在这种情况下的技巧是延时：

function draw(){
    var delay = 200;//Your delay in milliseconds
    setTimeout(function(){
        /*code */
        alert(pipeNorth.height);
        requestAnimationFrame(draw);
    },delay);
}

它对你有用吗？
我只是不知道如何将你的代码附加到我的代码上。我只是不知道如何将你的代码附加到我的代码上。