在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 Smithy

究竟是什麼你當前的代碼嗎？ – 2014-12-01 16:19:57

上面的當前代碼只顯示第一個圖像（broken1.png），然後它似乎停止並不會顯示下一個圖像 – Smithy 2014-12-01 16:24:04

請檢查此問題[SO問題]（http://stackoverflow.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>

來源

2014-12-01 16:49:18 AWolf

在HTML畫布上延遲一段時間後顯示圖像

回答

相關問題