源图像:

Heim  >  Artikel  >  Web-Frontend  >  HTML5-Canvas-Zeichnungsmethode zum Erstellen von Animationseffekten. Beispiel_HTML5-Tutorial-Fähigkeiten

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

WBOY
WBOYOriginal
2016-05-16 15:49:191659Durchsuche

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">
Canvas Mouse Event Demo

< ;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.
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn