Html5 Canvas 事前学習メモ (14) - 簡単なアニメーション実装

以前は単純な静的描画でしたが、この記事では次のような簡単なアニメーション効果を実装しています。

コードは次のとおりです。

これは主に 2 つの関数で構成されます。まず、ページがロードされると、

init

関数が呼び出されます。

関数には、最初にコンテキストなどを取得するためのいくつかの初期化文が含まれています。待ってから、画像オブジェクトを生成する主な手順は次のとおりです。

this.image = new Image();
this.image.src = "grossini.png";
this.image.onload = function(){
   setTimeout(update,33);
}

これは前に説明したとおりです。最初に src パス オブジェクトを指定し、次に onload 関数が呼び出されるとき 以前に絵を描いていたとき、ここでは

setTimeout

関数を呼び出し、update 関数を毎回呼び出しますその機能は、キャンバスを継続的に更新することです。 update 関数を見てみましょう。まず clearRect を呼び出して画面をクリアし、次に絵を描き、次に主人公の位置を更新し、最後に

setTimeout

を呼び出して update を実行させます。 ループで呼び出されます 上記は、Html5、Canvas、および単純なアニメーションの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。