アニメーションGIFの可能性は無限大だと思う。Webサイトに使うのはもちろん、ソーシャルメディアに投稿したり、GitHubやSlackなどに貼り付けられたりもします。アニメーションの繰り返しだけなのですが、内容が面白いものが多いのが特にユニークです。 そんなアニメーションGIFを作るには幾つかの方法がありますが、今回はCanvasを使ったGifCaptureCanvasを紹介します。

GifCaptureCanvasの使い方

GifCaptureCanvasで生成されたアニメーションGIFです。

gifCaptureCanvas = new GifCaptureCanvas();

と実行して、後はCanvasにオブジェクトをレンダリングしていくだけです。

// set a capturing time duration (seconds.)
// default: 3 seconds
gifCaptureCanvas.durationSec = 3;
// set a capturing fps
// default: 20 fps
gifCaptureCanvas.fps = 20;
// set a scaling of a capturing screen size
// default: 0.5
gifCaptureCanvas.scale = 0.5;
// set a keycode of a capturing key
// default: 67 ('C')
gifCaptureCanvas.keyCode = 67;

設定も幾つかあり、キャプチャするタイミングも設定ができます。デモのように図形を描くのはもちろん、Canvas上で描かれるゲームをキャプチャしても面白そうです。

GifCaptureCanvasはHTML5/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

abagames/GifCaptureCanvas