HTML5になってから、canvas要素というものが追加されました。canvas要素はJavaScriptから好きなグラフィックを描くことができ、使い方次第で様々な表現を実現できます。

やり方次第では、canvas要素にアニメーションを描画することもできます。そこで、この記事では、javaScriptとcanvas要素を使って、アニメーションを作る方法を紹介します。

canvas要素の扱い方

ここではcanvas要素の扱い方は、詳しくは紹介しません。「javascript canvas」や「html canvas」などでググってください。

canvas要素の大まかな使い方は以下の通りです:

  1. canvas要素を取得する
  2. canvas要素のコンテキストを取得する
  3. コンテキストを通して描画する

まずは静止画

いきなりアニメーションというのも難しいでしょう。まずは静止画を描画するところを目標にしてみます。

今回は、いくつかの円を描画します。以下のようなコードになります:

止まっている円が表示されたでしょうか。canvas要素の基本的な使い方通り、コンテキストを取得して、描画しています。

このとき、ひとつのコツとして、描画データは描画前に全て揃っていることが好ましいです。つまり、描画データを全て準備してから、それらを全部一気に描画するということです。データの準備と描画がごちゃまぜになっているとプログラムの流れがわかりにくくなるので、こうしたほうが見通しが良くなります。

アニメーションに対応させる

次にこの静止画をアニメーションに対応させます。

アニメーションを実現するためには、以下のような手順が必要になります:

  1. 前に描画したものを消す
  2. 描画するものの位置やサイズなどを動かす
  3. 描画する
  4. 1に戻る

これを永遠に繰り返すことにより、アニメーションを実現できます。要は、パラパラ漫画ですね。描画を繰り返すたびに新しいグラフィックが描かれるので、動いているように見えるという原理です。

これをJavaScriptで実装してみましょう。

アニメーションのループ(繰り返し)にはwindow.requestAnimationFrameを使うと楽です。requestAnimationFrameは、一般的には秒間60回(60fps)のアニメーションを実現するための関数です。環境によってはもっと高いフレームレートになるかもしれません。

ループ処理をひとつの関数にまとめ、requestAnimationFrameに、ループさせたい関数を渡します。そしてループ関数の中で、またrequestAnimationFrameを呼び出します。


これでアニメーションに対応しました!前の描画を消す→オブジェクトを更新する→オブジェクトを描画する→次のフレームに移る、の流れが完成しました。今度も円が表示されたはずです。

しかしまだ動いてはいません。今度は円のパラメータをいじって、本当に動くかどうか確かめてみましょう。

円をアニメーションさせる

先ほどのコードの/* 今は特に何もしない */の部分をいじって、アニメーションさせてみましょう。

radius < 100のときにどんどんradiusを大きくしていって、100を超えたら元に戻るアニメーションを作ってみます。

動きました!これでアニメーションの完成です。あとは円のパラメータを好きにいじることによって、好みのアニメーションをさせることができます。

図形の形状を変えてみてもいいでしょう。例えば四角形を描画するように変えてみるのも面白いかもしれません。

もっと複雑なアニメーション

ここまでの内容でアニメーションについては全て説明しました。しかし現実にはもっと複雑なアニメーションをさせたいはずです。例えば複数の形状や複数の動きが入り乱れるようなアニメーションです。

これを実現するには様々なアプローチが存在しますが、最も簡単なのはクラスを使うことでしょう。オブジェクトの種類だけクラスを作り、各クラスに更新メソッドと描画メソッドを実装するのです。例えば「四角形クラス」と「円クラス」を用意して、それぞれ別々の描画、動きをさせます。

これで複雑なアニメーションも実現することができました!

あとは、形状を変えてみたり、クラスを追加してみたり、動きを変えてみたりするといいでしょう。

もっともっと複雑なことをする

実際には「円クラス」の動きが一種類とは限りませんし、「四角形クラス」に関しても同様です。同じ円でも違う動きをさせたいことも多いでしょう。そういったときには、Circleクラスにはupdateメソッドを実装せず、継承先のクラスで実装するとか、「動き」クラスを作って動きオブジェクトを注入するなどといったアプローチが考えられるでしょう。

また、動きに関してもより複雑な動作をさせたいこともあるでしょう。今回は直線的な動きのみを扱いましたが、例えば「JavaScriptの三角関数とcanvasで円運動アニメーションを作る」では三角関数を用いたアニメーションを取り扱っています。

他にも、単なるアニメーションだけではなく、インタラクティブなコンテンツを作ることも考えられます。例えば「JavaScriptで弾幕STGをフルスクラッチで作る その1 ゲームエンジン編」では弾幕シューティングゲームの作り方を題材にしています。

加えて、本格的な3Dグラフィックスを扱うこともできます。「WebGL2入門 基礎編」では3Dグラフィックスを扱うことができるWebGL2について説明しています。

canvas要素は大きな可能性を秘めている要素です。あなたの発想次第で、どんなものでも作れるでしょう。何か思いついたら、なんでも試してみてください。