canvasに興味があったのでチャレンジ。 今回は2Dのアニメーション。ボールが跳ねるアニメーションを書きました。

canvasでアニメーションする際の手順

  1. 画面に描画したものを消す
  2. 図形の位置を計算
  3. 描画する

この繰り返しでアニメーションをさせています。

まず画面上の物をすべて消すには

ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);

canvas.width、canvas.heightでそれぞれcanvasの幅、高さを取得しています。

図形の位置の計算は中高の物理の計算を参考に。

処理のループのsetTimeoutで時間ごとに処理をループさせ書いています。

今回は簡単にまとめましたが、次回もうちょいじっくり書きたいと思います。

興味のある方はコチラを。 今回こちらのサイトを参考に今回書いみしました。

Canvasアニメーションの基礎 - nezzscript Html5 Canvas Canvas - HTML5.JP