HTML5キャンバスの画像は1つのフレームにのみ表示されます

Question

長時間のlurkerですが、決してアカウントを作成しませんでした。ちょうど私がデベロッパーではなく、ちょうど面白いことを試して実験していることを序文にしたかったので、私が本当に馬鹿に見える場合は事前にお詫びします。

私はTwitchストリーミングのダイナミックオーバーレイに取り組んでおり、以前はAS3を使用していましたが、今はHTML5に切り替えました。キャンバスにイメージを読み込もうとしています（これは、最終的には、Twitch APIを使用して取得されたプロファイル画像です...しかし、一度に1ステップ）。私は、Adobeアニメーションを使用していると私は、これまでの層の最初のフレーム上のアクションに次のように適用されています

var canvas = document.getElementById('canvas'), 
    context = canvas.getContext('2d'); 

show_image(); 

function show_image() { 
    source_image = new Image(); 
    source_image.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png'; 
    source_image.onload = function() { 
     context.drawImage(source_image, 100, 100); 
    } 
} 

私はCtrlキー+は、Chromeでそれを入力し、表示さ押すと、画像は最初のフレームのために表示されますその後消えます。私はそれが無限にとどまるようにする方法を私は確信していません。私は後でアニメーションできるようにする必要があります。最新のフォロー/寄付/サブなどに応じて変更されます。

タイムラインでフレーム自体を拡張しようとしましたが、ループして、画像自体を長くすることはありませんでした。私はおそらく本当に簡単な何かを欠いているでしょう！

ご協力いただければ幸いです。ありがとう！

Answer 1

あなたのアプローチでは、HTMLとJSのキャンバスを使用していて、ライブラリは一切関与していません。しかし、アニメートを使用しているので、これは当てはまりません。また、グラフィックを描画する方法は、drawImage()のようなデフォルトのキャンバスメソッドを使用する方法とは異なります。

アニメイトはEaselJSライブラリが含まれCreateJSスイートを含み、これはあなたのキャンバスに描くために、別のツールを使用することができます。 2つまたはそれ以上はStageオブジェクト、アニメーションプロジェクトのビジュアルコンテナ、画像、キャンバスまたはビデオを表すBitmapオブジェクトです。この質問の効果については、両方のオブジェクトだけが必要です。

/* It is not necessary to declare the canvas or stage element, 
    as both are already declared. At this point the stage is ready to be drawn */ 

show_image(); 

function show_image() { 
    var source_image = new Image(); 
    source_image.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png'; 

    source_image.onload = function(event) { 
     /* A new Bitmap object is created using your image element */ 
     var bmp = new createjs.Bitmap(event.currentTarget); 

     /* The Bitmap is added to the stage */ 
     stage.addChild(bmp); 
    } 
}