0

終了時に静止画像を生成するアニメーションがあります。この画像を 5 秒程度表示してから、別の静止画像に切り替えたいと考えています。これを修正するために setTimeout のさまざまな実装を試しましたが、うまくいきませんでした。

どんな助けでも大歓迎です。

私のコードは次のとおりです。

(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);
}())
4

1 に答える 1

0

Felix Kling は正しいです。図面を onload コールバックでラップする必要があります。以下のコードをご覧ください。それに対するjsFiddleはこちらです。

(コードをシンプルにするために 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-01T16:49:18.713 に答える