在HTML画布上延迟一段时间后显示图像

问题描述：

我有一个完成后会生成静止图像的动画。我希望此图像在显示约5秒后才能切换到另一张静止图像。我已经尝试过setTimeout的各种实现来解决这个问题，但它没有为我工作。在HTML画布上延迟一段时间后显示图像

任何帮助，将不胜感激。

继承人我的代码：

(function drawFrame() { 
    window.requestAnimationFrame(drawFrame, canvas); 
    <!--ctx.clearRect(0, 0, cw, ch); --> 
    image3 = new Image(); 
    image3.src = "broken1.png"; 
    ctx.drawImage(image3, 0, 0); 
    setTimeout(function() { 
    image4 = new Image(); 
    image4.src = "broken.png"; 
    ctx.drawImage(image4, 0, 0); 
    }, 5000); 
}())

究竟是什么你当前的代码吗？ – 2014-12-01 16:19:57

上面的当前代码只显示第一个图像（broken1.png），然后它似乎停止并不会显示下一个图像 – Smithy 2014-12-01 16:24:04

请检查此问题[SO问题]（http://*.com/questions/27159682/constant-脚本改变-SRC-iframe的1分钟，5分钟，jQuery的/ 27161331＃27161331）。它与iframe一样，但也应该与图像一起使用。 – AWolf 2014-12-01 16:26:09

答

费利克斯·克林是正确的，你应该包装在一个onload回调绘图。请看下面的代码。 jsFiddle它是here。

（我已经删除了requestAnimationFrame，使代码更简单，但我觉得在这里，这不是问题。）

$(function() { 
 
    function drawFrame() { 
 
     //window.requestAnimationFrame(drawFrame, canvas); 
 
     var c = document.getElementById("container"); 
 
     var ctx = c.getContext("2d"); 
 
     //ctx.clearRect(0, 0, cw, ch); 
 
     image3 = new Image(); 
 
     image3.onload = function() { 
 
      ctx.drawImage(this, 0, 0); 
 
      //console.log("loaded"); 
 
     }; 
 
     image3.src = "http://placehold.it/300x300"; 
 
     
 
     setTimeout(function() { 
 
      image4 = new Image(); 
 
      
 
      image4.onload = function() { 
 
       ctx.drawImage(this, 0, 0); 
 
      }; 
 
      image4.src = "https://placekitten.com/g/300/300"; 
 
     }, 5000); 
 
    } 
 
    
 
    drawFrame(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="container"></canvas>

在HTML画布上延迟一段时间后显示图像

相关推荐