ホーム > 技術情報 > HTML5のcanvasでアニメーションさせてみた

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

投稿日 : 2019年07月26日
カテゴリー : PHP/javascript/CSS / 技術情報
HTML5のcanvasでアニメーションさせてみたの画像

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

canvasでアニメーション

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

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

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

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

  1. canvasの大きさを画面幅から計算する
  2. 円要素を描画する回数を決める
  3. canvas領域内に円要素を描画(透過率を0.1秒ごとに+0.1で再描画、透過率1になったら終了)
  4. 円要素の描画数に達していなかったら、新たな円要素を描画する(3に戻る)
  5. 円要素をすべて描画し終えたら、指定の文字列を表示させる(透過率を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);

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

使いどころなど

トップページにちょっと乗っけてみるとか…お祭りのようにしたいときとか…

canvasを使いこなせれば、アイデア次第で色々な表現ができそうですね。

あなたへのおすすめ

こういうのが一冊あると便利なこともある。と思う。