Méthode de dessin HTML5 Canvas pour créer un effet d'animation example_html5 compétences du didacticiel

WBOY

Libérer： 2016-05-16 15:49:19

original

1663 Les gens l'ont consulté

Démonstration de l'effet d'animation HTML5 Canvas
Idée principale :
Préparez d'abord une image avec des images consécutives, puis utilisez la méthode de dessin de HTML5 Canvas pour dessiner différentes images à différents intervalles de temps. on dirait qu'une animation est en cours de lecture.
Points techniques clés :
La fonction JavaScript setTimeout() a deux paramètres. Le premier paramètre peut être transmis à une méthode JavaScript.
L'autre paramètre représente l'intervalle en nombre de millisecondes. . Exemple de code :
setTimeout( update, 1000/30);
La méthode API-drawImage() de Canvas nécessite de spécifier les 9 paramètres :
ctx.drawImage(myImage, offw, offh, width,height , x2 , y2, width, height);
où offw, offh fait référence au point de coordonnées de départ de l'image source, width, height représente la largeur et la hauteur de l'image source, x2, y2 représente
représente la position de l'image source dans la cible Le point de coordonnées de départ sur le canevas.
L'effet obtenu par une image volante d'oie sauvage de 22 images :

Image source :

Code du programme :

Copier le code

Le code est le suivant :

Démo de l'événement Canvas Mouse

< ;script>
var ctx = null; // contexte variable globale 2d
var démarré = false
var mText_canvas = null
var x = 0, y =0; = 0; // 22 5*5 2
var imageReady = false;
var monImage = null
var px = 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 non pris en charge. Veuillez installer un Navigateur compatible HTML5." );
return;
}
// obtenir le contexte 2D du canevas et dessiner un rectangle
ctx = canvas.getContext("2d");
ctx.fillStyle= "noir";
ctx.fillRect(0, 0, canvas.width, canvas.height);
monImage = document.createElement('img'); .png";
myImage.onload = chargé();
}
fonction chargée() {
imageReady = true;
setTimeout( mise à jour, 1000/30);
}
function redraw () {
ctx.clearRect(0, 0, 460, 460)
ctx.fillStyle="black";
ctx.fillRect(0, 0, 460, 460);
// trouver l'index des images dans l'image
var height = myImage.naturalHeight/5;
var width = myImage.naturalWidth/5
var row = Math.floor(frame / 5); ;
var col = frame - row * 5;
var offw = col * width;
var offh = row * height;// premier merle
px = px - 5; 🎜>py = py - 5;
if(px < -50) {
px = 300;
}
if(py < -50) {
py = 300;
}
//var rate = (image 1) /22
//var rw = Math.floor(rate * width); height);
ctx.drawImage(myImage, offw, offh, width, height, px, py, width, height
// second robin
x2 = x2 - 5; y2 5;
if(x2 < -50) {
x2 = 300;
y2 = 0;
}
ctx.drawImage(monImage, offw, offh, largeur, hauteur, x2, y2, width , height);
}
function update() {
redraw();
if (frame >= 22) frame = 0; >setTimeout( mise à jour, 1000/30);
}

Démo d'animations HTML Canvas - Par Poisson sombre

Lire les animations

< /div>

J'ai découvert qu'il y avait un problème lors du téléchargement du format PNG transparent, j'ai donc téléchargé des images opaques. Vous pouvez le remplacer par d'autres images. Après le remplacement, veuillez modifier le numéro d'image maximum de 22 à votre numéro d'image réel pour exécuter.