HTML5-Canvas-Zeichnungsmethode zum Erstellen von Animationseffekten. Beispiel_HTML5-Tutorial-Fähigkeiten

Demonstration des HTML5-Canvas-Animationseffekts
Hauptidee:
Bereiten Sie zuerst ein Bild mit aufeinanderfolgenden Frames vor und verwenden Sie dann die Zeichenmethode von HTML5 Canvas, um verschiedene Frames in unterschiedlichen Zeitintervallen zu zeichnen hört sich an, als ob eine Animation läuft.
Wichtige technische Punkte:
Die JavaScript-Funktion setTimeout() hat zwei Parameter. Der erste Parameter kann an eine JavaScript-Methode übergeben werden.
Der andere Parameter stellt das Intervall in Millisekunden dar . Codebeispiel:
setTimeout( update, 1000/30);
Die API-drawImage()-Methode von Canvas erfordert die Angabe aller 9 Parameter:
ctx.drawImage(myImage, offw, offh, width,height , x2 , y2, width, height);
wobei sich offw, offh auf den Startkoordinatenpunkt des Quellbildes bezieht, width, height die Breite und Höhe des Quellbildes darstellt, x2, y2 repräsentiert
die Position von das Quellbild im Ziel Der Startkoordinatenpunkt auf der Leinwand.
Der durch ein Wildgans-Flugbild mit 22 Bildern erzielte Effekt:

Quellenbild:

Programmcode:

Code kopieren

Der Code lautet wie folgt:

html;charset=UTF -8">


< ;script>
var ctx = null; // global variable 2d context
var mText_canvas = null;
var frame = 0; // 22 5*5 2
var imageReady = false;
var px = 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 nicht unterstützt. Bitte installieren Sie a HTML5-kompatibler Browser "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
myImage = document.createElement('img'); .png";
myImage.onload = geladen();
}
Funktion geladen() {
imageReady = true;
setTimeout( update, 1000/30);
}
function redraw () {
ctx.clearRect(0, 0, 460, 460)
ctx.fillStyle="black";
ctx.fillRect(0, 0, 460, 460);
// den Index der Frames im Bild finden
var height = myImage.naturalHeight/5;
var width = myImage.naturalWidth/5;
var row = Math.floor(frame / 5) ;
var col = col * width;
var offh = row * height; 🎜>py = py - 5;
if(px < -50) {
px = 300;
}
if(py < -50) {
py = 300;
}
//var rate = (frame 1) /22;
//var rw = Math.floor(rate * width); height);
ctx.drawImage(myImage, offw, offh, width, px, py, width, height);
x2 = x2 - 5;
y2 = y2 5;
if(x2 < -50) {
x2 = 300;
y2 = 0;
ctx.drawImage(myImage, offw, offh, width, height, x2, y2, width , height);
}
function update() {
frame ; >setTimeout( update, 1000/30);

Gloomy Fish

Play Animations

< /div>



Ich habe ein Problem beim Hochladen des transparenten PNG-Formats festgestellt. Sie können es durch andere Bilder ersetzen. Bitte ändern Sie die maximale Bildnummer von 22 auf Ihre tatsächliche Bildnummer, um ausgeführt zu werden.