HTML5のcanvasでアニメーションさせてみた

こんにちわ、PHPエンジニアのエンジニア婦人（@naho_osada）です。
PHPエンジニアとして9年～の経験があります。

HTML5の<canvas>タグで少し遊んでみました。

canvasでアニメーション

デモページはこちらから閲覧できます。

ソースはGitHubで公開しています。（cssとjsだけなので、ここでも全公開しているようなものですが）

※LICENCEはMITにしています。ご自由にどうぞ。

プログラムは以下のようになっています。

canvasの大きさを画面幅から計算する
円要素を描画する回数を決める
canvas領域内に円要素を描画（透過率を0.1秒ごとに+0.1で再描画、透過率1になったら終了）
円要素の描画数に達していなかったら、新たな円要素を描画する（３に戻る）
円要素をすべて描画し終えたら、指定の文字列を表示させる（透過率を0.1秒ごとに+0.1で再描画、透過率1になったら終了）

canvasの大きさを画面幅から計算

canvasは予めcanvas領域の大きさを指定しておく必要があります。

しかし、「予め指定しておく」ということは、「canvasに指定した領域より小さい画面で見たときに崩れて表示される」ということです。

これを防ぐため、つまりはレスポンシブにするため、画面に描画する際に計算をしています。

// canvas要素（ここでは#festival）を取得する
var canvas = $('#festival');
if($(window).width() < 900) {
    $('#festival').width($(window).width()-50 + 'px');
} else {
    $('#festival').width('900px');
}
var x = $('#festival').width();
var y = $('#festival').height();
canvas[0].width = x;
canvas[0].height = y;

これはcanvas要素に限った話ではなく、様々な場面で応用できると思います。

円要素を描画する回数を決める

別に回数は固定でもいいのですが、ちょっとした遊び心です。

アクセスする度に円要素の描画数は変わります。最大50個です。通常のjavascript関数を使います。

var countMax = Math.floor( Math.random() * 50);

canvas領域内に円を描画する

ここからが本番です。円要素を描画していきます。

canvasではアニメーションを作るときに、透過率や描画位置を少しずつ移動させることで描画していきます。

ここでは「円要素がだんだん出てくるようにしたい」と思ったので、透過率を0.1から1まで、0.1秒ごとにあげていく処理を入れました。

また、円要素の描画位置はランダムにしたかったので、描画の座標をランダムに設定しています。

var randX = Math.floor( Math.random() * x);
var randY = Math.floor( Math.random() * y);
var randR = Math.floor( Math.random() * 30);

var finishDraw = setInterval(function(){
    var context = canvas[0].getContext('2d');
    // パスをリセット
    context.beginPath();

    // 円の中心座標
    // 開始角度: 0度 (0 * Math.PI / 180)
    // 終了角度: 360度 (360 * Math.PI / 180)
    // 方向: true=反時計回りの円、false=時計回りの円
    context.arc(randX, randY, randR, 0, Math.PI * 2, true);
    // 色の設定
    context.fillStyle = color[colorNo];
    // 透明度指定
    context.globalAlpha = alpha;
    alpha = alpha + 0.1;

    // 塗りつぶしを実行
    context.fill();

    if(alpha >= 1) {
        clearInterval(finishDraw);
    }
},100);

これを円要素描画最大数まで繰り返します。

最後に文字列を表示する

こちらも円要素同様、文字列がだんだん出てくるようにしたかったので、透過率を0.1から1まで、0.1秒ごとにあげていく処理を入れました。

var finishStr = setInterval(function(){
    var context = canvas[0].getContext('2d');
    //テキスト描画のスタイルを指定する
    context.fillStyle = "#EEEEEE";
    context.font = fontSize + " 'Italic'";
    context.textAlign = "left";
    context.textBaseline = "top";

    // 透明度指定
    context.globalAlpha = alpha;
    alpha = alpha + 0.1;
    if(alpha >= 1) {
        clearInterval(finishStr);
    }
    context.fillText(canvasStr, x/5, y/4, x);
}, 100);

フォントのサイズや位置を決めて描画しています。