Komentar: Pertama, siapkan gambar dengan bingkai kontinu, dan kemudian gunakan metode gambar HTML5 Canvas untuk menggambar bingkai yang berbeda pada interval waktu yang berbeda. Dengan cara ini, sepertinya sebuah animasi sedang diputar. Poin teknis utama dan kode contoh adalah sebagai berikut. Teman yang tertarik dapat merujuknya. Saya harap ini akan membantu semua orang.
Demonstrasi efek animasi kanvas html5Ide Utama:
Pertama, siapkan gambar dengan bingkai kontinu, dan kemudian gunakan metode gambar HTML5 Canvas untuk menggambar bingkai yang berbeda pada interval waktu yang berbeda, sehingga terlihat seperti animasi yang diputar.
Poin teknis utama:
SetTimeout fungsi JavaScript () memiliki dua parameter. Yang pertama adalah bahwa parameter dapat melewati metode JavaScript.
Parameter lain mewakili waktu interval, dalam milidetik. Contoh kode:
setTimeout (perbarui, 1000/30);
Metode Canvas 'API-Drawimage () membutuhkan semua 9 parameter:
ctx.drawimage (myimage, offw, offh, lebar, tinggi, x2, y2, lebar, tinggi);
Di mana Offw dan Offh merujuk pada titik koordinat awal dari gambar sumber, lebar dan tinggi mewakili lebar dan tinggi gambar sumber, tabel x2 dan y2
Menunjukkan titik koordinat awal dari gambar sumber pada kanvas target.
Efek dari gambar terbang angsa liar 22-frame:
Gambar Sumber:
Kode Program:
<! Doctype html>
<Html>
<head>
<meta http-equiv = "x-ua-kompatibel" konten = "chrome = ie8">
<meta http-equiv = "tipe konten" content = "text/html; charset = utf-8">
<title> Demo Acara Mouse Canvas </iteme>
<tautan href = "default.css" />
<script>
var ctx = null; // Konteks 2D Variabel Global
var dimulai = false;
var mtext_canvas = null;
var x = 0, y = 0;
var frame = 0; // 22 5*5 + 2
var ImageReady = false;
var myimage = null;
var px = 300;
var py = 300;
var x2 = 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 ("Canvas tidak didukung. Harap instal browser yang kompatibel HTML5.");
kembali;
}
// Dapatkan konteks 2D kanvas dan menggambar persegi panjang
ctx = canvas.getContext ("2d");
ctx.fillstyle = "hitam";
ctx.fillrect (0, 0, canvas.width, canvas.height);
myimage = document.createElement ('img');
myimage.src = "../robin.png";
myimage.onload = dimuat ();
}
fungsi dimuat () {
ImageReady = true;
setTimeout (perbarui, 1000/30);
}
fungsi redraw () {
ctx.clearrect (0, 0, 460, 460)
ctx.fillstyle = "hitam";
ctx.fillrect (0, 0, 460, 460);
// Temukan indeks bingkai dalam gambar
var height = myimage.naturalHeight/5;
var width = myimage.naturalwidth/5;
var row = math.floor (frame / 5);
var col = frame - baris * 5;
var offw = col * lebar;
var offh = baris * tinggi;
// robin pertama
px = px - 5;
py = py - 5;
if (px <-50) {
px = 300;
}
if (py <-50) {
py = 300;
}
// var rate = (bingkai+1) /22;
// var rw = math.floor (rate * width);
// var rh = math.floor (tarif * tinggi);
ctx.drawimage (myimage, offw, offh, lebar, tinggi, px, py, lebar, tinggi);
// Robin Kedua
x2 = x2 - 5;
y2 = y2 + 5;
if (x2 <-50) {
x2 = 300;
y2 = 0;
}
ctx.drawimage (myimage, offw, offh, lebar, tinggi, x2, y2, lebar, tinggi);
}
function update () {
redraw ();
bingkai ++;
if (frame> = 22) frame = 0;
setTimeout (perbarui, 1000/30);
}
</script>
</head>
<body>
<h1> Demo Animasi Kanvas HTML - oleh GelloMy Fish </h1>
<play animations </pr Pre>
<div>
<Canvas> </an Canvas>
</div>
</body>
</html>
Saya menemukan bahwa ada masalah dengan mengunggah format PNG transparan, jadi saya mengunggah gambar buram. Anda dapat menggantinya dengan gambar lain. Setelah penggantian, harap modifikasi jumlah frame maksimum dari 22 ke jumlah bingkai Anda yang sebenarnya untuk dijalankan.