javascriptでGIFアニメを作る【jsgif】


htmlで通信なしにGIFアニメを作成したい。

そこで jsgif というライブラリがあったので使ってみた。

antimatter15/jsgif
jsgif - Save a HTML5 Canvas to GIF and Animations. A port of as3gif GIFPlayer to JS

ダウンロード&解凍したらhtmlにリンクを追加。

読み込み終わったら次のようなスクリプト記述でGIFアニメが作れる。

addFrameでcontext要素を変えながら追加していくとGIFアニメになる。

オプションの1つで指定した色を透明として扱うこともできる。

encoder.setTransparent(0x0000FF); 

しかしコレはそのままでは使えなかった。

GIFEncoder.js の以下部分を変更。

 

 

これで指定した色が透明になる。

位置を変えながらfillTextすると次のようなGIFアニメが作れた。

index

これを使ってまたなんか作ってみよう。

 


コメントを残す

メールアドレスが公開されることはありません。