Kaedah lukisan Kanvas HTML5 untuk mencipta kesan animasi example_html5 kemahiran tutorial

Demonstrasi kesan animasi Kanvas HTML5
Idea utama:
Mula-mula sediakan gambar dengan bingkai berturut-turut, dan kemudian gunakan kaedah lukisan Kanvas HTML5 untuk melukis bingkai yang berbeza pada selang masa yang berbeza. Lihatlah seperti ini bunyi seperti animasi sedang dimainkan.
Mata teknikal utama:
Fungsi JavaScript setTimeout() mempunyai dua parameter Parameter pertama boleh dihantar ke kaedah JavaScript
Parameter lain mewakili selang dalam nombor milisaat . Contoh kod:
setTimeout( kemas kini, 1000/30);
Kaedah canvas' API-drawImage() memerlukan menyatakan kesemua 9 parameter:
ctx.drawImage(myImage, offw, offh, width,height , x2 , y2, lebar, tinggi);
di mana offw, offh merujuk kepada titik koordinat permulaan imej sumber, lebar, tinggi mewakili lebar dan tinggi imej sumber, x2, y2 mewakili
mewakili kedudukan bagi imej sumber dalam sasaran Titik koordinat permulaan pada Kanvas.
Kesan yang dicapai oleh gambar terbang angsa liar 22 bingkai:

Imej sumber:

Kod program:

Salin kod

Kodnya adalah seperti berikut:

< ;skrip>
var ctx = null; // konteks 2d global
var bermula = palsu
var mText_canvas = null; = 0; // 22 5*5 2
var imageReady =
var myImage = null;
var y2 = 0;
window.onload = function() {
var canvas = document.getElementById("animation_canvas"); >canvas.width = canvas.parentNode.clientWidth;
canvas.height = canvas.parentNode.clientHeight;
jika (!canvas.getContext) {
console.log("Kanvas tidak disokong. Sila pasangkan Penyemak imbas serasi HTML5." );
kembali;
}
// dapatkan konteks 2D kanvas dan lukis segi empat tepat
ctx = canvas.getContext("2d");
ctx.fillStyle= "hitam";
ctx.fillRect(0, 0, canvas.width, canvas.height); .png";
myImage.onload = loaded();
}
function loaded() {
imageReady = true;
setTimeout( kemas kini, 1000/30);
}
fungsi lukis semula () {
ctx.clearRect(0, 0, 460, 460)
ctx.fillStyle="black";
// cari indeks bingkai dalam imej
var height = myImage.naturalHeight/5;
var width = myImage.naturalWidth/5
var row = Math.floor(frame / 5) ;
var col = bingkai - baris * 5;
var offw = col * width; 🎜>py = py - 5;
if(px < -50) {
px = 300;
}
if(py < -50) {
py = 300;
}
//kadar var = (bingkai 1) /22;
//var rw = Math.floor(kadar * lebar); tinggi);
ctx.drawImage(myImage, offw, offh, width, height, px, py, width, height)
x2 = x2 - 5; y2 5;
jika(x2 < -50) {
x2 = 300;
y2 = 0; x2, y2, lebar , tinggi);
}
kemas kini fungsi() {
gambar semula(); >setTimeout( kemas kini, 1000/30);

Ikan SuramMainkan Animasi

< /div>

Anda boleh menggantikannya dengan gambar lain Selepas penggantian, sila ubah suai nombor bingkai maksimum daripada 22 kepada nombor bingkai sebenar anda untuk dijalankan.

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn