< ;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 から実際に実行するフレーム数に変更してください。