Kommentar: Bereiten Sie zuerst ein Bild mit kontinuierlichen Rahmen vor und verwenden Sie dann die Zeichnungsmethode von HTML5 Canvas, um in unterschiedlichen Zeitintervallen verschiedene Frames zu zeichnen. Auf diese Weise sieht es so aus, als würde eine Animation spielen. Die wichtigsten technischen Punkte und Beispielcodes sind wie folgt. Interessierte Freunde können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
HTML5 Canvas Animation Effect DemonstrationHauptideen:
Bereiten Sie zuerst ein Bild mit kontinuierlichen Frames vor und verwenden Sie dann die Zeichnungsmethode von HTML5 Canvas, um in verschiedenen Zeitintervallen verschiedene Rahmen zu zeichnen, damit es so aussieht, als würde eine Animation abgespielt.
Wichtige technische Punkte:
Die JavaScript -Funktion setTimeout () verfügt über zwei Parameter. Das erste ist, dass der Parameter eine JavaScript -Methode übergeben kann.
Ein weiterer Parameter repräsentiert die Intervallzeit in Millisekunden. Codebeispiel:
setTimeout (Update, 1000/30);
Die api-drawimage () -Methode von Canvas erfordert alle 9 Parameter:
ctx.drawimage (myimage, offw, offh, width, Höhe, x2, y2, breite, Höhe);
wobei Offw und Offh auf den Startkoordinatenpunkt des Quellbildes beziehen
Zeigt den Startkoordinatenpunkt des Quellbildes auf der Ziel -Leinwand an.
Der Effekt eines 22-Frame-Wildgans-Flugbildes:
Quellbild:
Programmcode:
<! DocType html>
<html>
<kopf>
<meta http-äquiv = "x-ua-kompatible" content = "chrome = ie8">
<meta http-äquiv = "content-type" content = "text/html; charset = utf-8">
<title> Canvas Mouse Event Demo </title>
<link href = "default.css" />
<Script>
var ctx = null; // Globale variable 2D -Kontext
var gestartet = falsch;
var mtext_canvas = null;
var x = 0, y = 0;
var Frame = 0; // 22 5*5 + 2
var imagerady = 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 nicht unterstützt. Bitte installieren Sie einen HTML5 -kompatiblen Browser.");
zurückkehren;
}
// Erhalten Sie 2D -Kontext von Leinwand und zeichnen Sie Rechteschel
ctx = canvas.getContext ("2d");
Ctx.FillStyle = "Black";
Ctx.FillRect (0, 0, Canvas.width, canvas.height);
myimage = document.createelement ('img');
myimage.src = "../robin.png";
myimage.onload = loaded ();
}
Funktion geladen () {
ImageReady = wahr;
setTimeout (Update, 1000/30);
}
Funktion redraw () {
ctx.clearrect (0, 0, 460, 460)
Ctx.FillStyle = "Black";
Ctx.FillRect (0, 0, 460, 460);
// Finden Sie den Rahmenindex im Bild
var hohe = myimage.naturalHeight/5;
var width = myimage.naturalwidth/5;
var row = math.floor (Frame / 5);
var col = Frame - Zeile * 5;
var offw = col * Breite;
var offh = row * Höhe;
// Erster Robin
px = px - 5;
py = py - 5;
if (px <-50) {
px = 300;
}
if (py <-50) {
PY = 300;
}
// var rate = (Frame+1) /22;
// var rw = math.floor (Rate * Breite);
// var rh = math.floor (Rate * Höhe);
ctx.drawimage (myimage, offw, offh, width, Höhe, px, py, width, Höhe);
// Zweiter Robin
x2 = x2 - 5;
y2 = y2 + 5;
if (x2 <-50) {
x2 = 300;
y2 = 0;
}
ctx.drawimage (myimage, offw, offh, width, Höhe, x2, y2, breite, Höhe);
}
Funktion update () {
neu zeichnen ();
Rahmen ++;
if (Frame> = 22) Frame = 0;
setTimeout (Update, 1000/30);
}
</script>
</head>
<body>
<h1> html canvas Animationen Demo - von düsterer Fisch </h1>
<pre> Animationen abspielen </pre>
<div>
<Canvas> </canvas>
</div>
</body>
</html>
Ich stellte fest, dass es ein Problem beim Upload des transparenten PNG -Formats gab, also habe ich undurchsichtige Bilder hochgeladen. Sie können es durch andere Bilder ersetzen. Nach dem Ersatz ändern Sie bitte die maximale Anzahl von Frames von 22 an Ihre tatsächliche Anzahl von Frames, die ausgeführt werden sollen.