HTML5 Canvas アニメーション効果のグラフィック コードのデモ

HTML5 Canvas アニメーション効果のデモ

メインアイデア:

まず、連続したフレームを持つ画像を準備し、HTML5 Canvas の描画メソッドを使用して異なる間隔で描画します

異なるフレームが表示されるので、アニメーションが再生されているように見えます。

技術的なポイント:

JavaScript 関数 setTimeout() には 2 つのパラメーターがあります。最初のパラメーターは JavaScript メソッドに渡すことができます。

もう 1 つのパラメーターは、ミリ秒単位で間隔を表します。コード例:

setTimeout(update, 1000/30);

Canvas API-drawImage() メソッドでは、9 つ​​のパラメータをすべて指定する必要があります:

ctx.drawImage(myImage, offw, offh, width,height, x2, y2, width, height);

ここで、offw、offh はソース画像の開始座標点を指し、width、height はソース画像の幅と高さを表し、x2、y2 は を表します。

ターゲットキャンバス上のソース画像の開始座標点を示します。

22フレームの雁の飛行写真によって達成される効果:

ソース画像:

プログラムコード:

りー

アップロードを発見 透明な PNG 形式に問題があるため、

不透明な画像をアップロードします。他の画像に置き換えることができます。置き換えた後、最大フレーム数を 22 から実際に実行するフレーム数に変更してください。

上記は、HTML5 キャンバス アニメーション効果グラフィック コードのデモの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。 関連記事:

HTML5 Canvasを使用して3Dアニメーション効果を作成する方法

5つのプリロードアニメーション効果を実現するCSS3アニメーション

css3アニメーション効果の概要分析