HTML5のcanvas要素によるアニメーション


canvas要素を使ったアニメーションのサンプル

HTML5では、特にアニメーションのためのJavascript関数があるわけではなく、従来のタイマー関数などをつかって
canvasに1コマ1コマ、アニメーションフレームを描画しているにすぎません。

javascriptのコードは以下です。長いですが、window.setInterval関数でフレームごとの描画を行う関数(このサンプルではdraw)を呼び出しているだけです。

大事な点は、描画のためのタイマー処理の最初にcontext.save()を呼び、最後にcontext.restore()を呼び出していることです。save関数で現在のcanvasの描画情報を保存し、次のコマの描画を行い(コンテキストの更新)、restore関数でsave()によって保存した描画情報を復元します。これにより、次のコマの内容が再描画され、アニメーションとなっていきます。

広告
  • LINEで送る