アニメーション効果を作成する HTML5 Canvas 描画メソッド example_html5 チュートリアル スキル

HTML5 Canvas アニメーション効果のデモ
メインアイデア:
まず、連続したフレームを持つ画像を用意し、次に HTML5 Canvas の描画メソッドを使用して、異なる時間間隔で異なるフレームを描画します。アニメーションが再生されているような音です。
重要な技術点:
JavaScript 関数 setTimeout() には 2 つのパラメーターがあります。
もう 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 フレームの雁の飛行画像によって達成される効果:

ソース画像:

プログラム コード:

コードをコピーします

< ;script>
var ctx = null; // グローバル変数 2D コンテキスト
var mText_canvas = null; = 0; // 22 5*5 2
var myImage = null;
var py = 300;
var y2 = 0;
window.onload = function() {
var Canvas = document.getElementById("animation_canvas");
console.log(canvas.parentNode.clientWidth); >canvas.width = Canvas.parentNode.clientWidth;
canvas.height = Canvas.parentNode.clientHeight;
if (!canvas.getContext) {
console.log("キャンバスはサポートされていません。 HTML5 互換ブラウザ。" );
return;
}
// キャンバスの 2D コンテキストを取得し、長方形を描画
ctx = Canvas.getContext("2d");
ctx.fillStyle= "黒";
ctx.fillRect(0, 0, Canvas.width, Canvas.height);
myImage = document.createElement('img');
myImage.src = "../robin .png";
myImage.onload =loaded();
}
functionloaded() {
imageReady = true;
setTimeout( update, 1000/30);
}
関数 redraw () {
ctx.clearRect(0, 0, 460, 460)
ctx.fillStyle="black";
ctx.fillRect(0, 0, 460, 460);
// 画像内のフレームのインデックスを検索します
var height = myImage.naturalHeight/5;
var width = myImage.naturalWidth/5;
var row = Math.floor(frame / 5) ;
var col = 行 * 5;
var offw = 行 * 高さ
// 最初のロビン
px = px - 5; 🎜>py = py - 5;
if(px px = 300;
}
if(py py = 300;
}
//var rate = (フレーム 1) /22;
//var rw = Math.floor(rate * width);
//var rh = Math.floor(rate *) height);
ctx.drawImage(myImage, offw, offh, width, height, px, py, width, height);
// 2 番目のロビン
x2 = x2 - 5; y2 5;
if(x2 x2 = 300;
}
ctx.drawImage(myImage, offw, offh, width, height, x2, y2, width , height);
}
関数 update() {
フレーム ;
if (フレーム >= 22) フレーム = 0; >setTimeout( update, 1000/30);

暗い魚

アニメーションを再生

< /div>



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