HTML5のgif内部キャンバスの再生方法

キャンバスの中でgifを再生したい。私は、次のコードを使用していました。それは動作していません。私のコードまたはそれを行う他の方法で間違っています。HTML5のgif内部キャンバスの再生方法

var drawingCanvas = document.getElementById('myDrawingCanvas'); 
if(drawingCanvas.getContext) 
{ 
    var context = drawingCanvas.getContext('2d'); 
    var imgObj = new Image(); 

    imgObj.onload = function() 
    {  
     context.drawImage(imgObj, 0, 0, 1024, 600); 
    } 
    imgObj.src='HTML Images/Spell Bee/images/mainscreen.gif'; 
}

出典

2012-02-14 Namratha

その画像パスは正しいですか？あなたのURLにスペースを入れてはいけませんが、 '％20'と置き換える必要がある場合はスペースを使います。 –

私もスペースを削除してみました。違いはありません – Namratha

投稿した回答を見てください。あなたはそうすることができるはずです。 –

キャンバスにはアニメーションGIFを処理する方法が用意されていないため、できません。 gifを1つのフレームに分割してspritesheetを作成し、現在のフレームをコピーしてアニメーション化する必要があります。

出典

2012-02-14 14:39:15 rezoner

kありがとうございます。私は別のフレームを使用しようとします。 – Namratha

私は記事を見つけましたanswers your question。基本的に、アニメーションGIFをキャンバス要素に追加すると、画像が含まれているときの正確な状態が表示されます。したがって、rezonerが言うように、スプライトシートを作成し、javascriptを使用してアニメーション化する必要があります。

出典

2012-02-14 15:07:27

JavaScriptを使用してGIFを実際にデコードし、フレームをキャンバスに書き込むことができます。確認http://slbkbs.org/jsgif/

出典

2012-10-03 23:29:46 forresto

更新：最も関連性の高いものは、バズフィードのフォークを使用することです：https://github.com/buzzfeed/libgif-js。彼らは@forrestoプロジェクトをフォークし、いくつかの基本機能を追加しました。 – Ser

HTML5のgif内部キャンバスの再生方法

答えて

関連する問題