[HTML5] Canvas勉強メモ #3「アニメーション」

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

今回はcanvasで生成した画像を動かしてみたいと思います。

やり方は基本的には、JavaScriptで描画したcanvas画像を消して、次の画像(座標変更や変形したもの)を描画する作業を繰り返すだけです。

描画1→削除1→描画2→削除2→描画3→削除3→・・・・

一般的なアニメーションと同じ間隔で、描画と削除の繰り返し間隔がフレームレートと言うわけです。

基本サンプル

index.html

canvas.js

プレビュー


とりあえず、簡単なアニメーションですが、複雑なものは描画を細分化して関数化したりしながら設計するといいでしょう。

Links

[HTML5] Canvas勉強メモ #1「基本構造」
[HTML5] Canvas勉強メモ #2「お絵かきツール」
[HTML5] Canvas勉強メモ #3「アニメーション」

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です