HTML5 Canvas Draw Méthode pour créer un exemple d'effet d'animation

Auteur：Eve Cole Date de mise à jour：2025-05-08 10:48:02

Commentaire: Tout d'abord, préparez une image avec des trames continues, puis utilisez la méthode de dessiner HTML5 Canvas pour dessiner différentes cadres à différents intervalles de temps. De cette façon, il semble qu'une animation joue. Les principaux points techniques et les codes d'exemples sont les suivants. Les amis intéressés peuvent y faire référence. J'espère que ce sera utile à tout le monde.

Démonstration d'effet d'animation de toile HTML5

Idées principales:

Tout d'abord, préparez une image avec des images continues, puis utilisez la méthode de dessin du canevas HTML5 pour dessiner différentes cadres à différents intervalles de temps, afin qu'il semble qu'une animation joue.

Points techniques clés:

La fonction JavaScript setTimeout () a deux paramètres. Le premier est que le paramètre peut transmettre une méthode JavaScript.

Un autre paramètre représente le temps d'intervalle, en millisecondes. Exemple de code:

setTimeout (mise à jour, 1000/30);

La méthode API-DrawImage () de Canvas nécessite les 9 paramètres:

CTX.Drawimage (Myimage, Offw, Offh, Largeur, hauteur, x2, Y2, largeur, hauteur);

où Offw et Offh se réfèrent au point de coordonnée de départ de l'image source, la largeur et la hauteur représentent la largeur et la hauteur de l'image source, les tables X2 et Y2

Montre le point de coordonnée de démarrage de l'image source sur le canevas cible.

L'effet d'une image volante à l'oie sauvage de 22 images:

Image source:

Code du programme:

<! Doctype html>

<html>

<adal>

<Title> Canvas Mouse Event Demo </Title>

<cript>

var ctx = null; // Contexte 2D variable globale

var démarré = false;

var mtext_canvas = null;

var x = 0, y = 0;

var frame = 0; // 22 5 * 5 + 2

var imageready = 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 non pris en charge. Veuillez installer un navigateur compatible HTML5.");

retour;

}

// Obtenez un contexte 2D de toile et dessinez du rectange

ctx = canvas.getContext ("2d");

ctx.fillStyle = "noir";

ctx.fillrect (0, 0, canvas.width, canvas.height);

MyImage = document.CreateElement ('img');

myimage.src = "../robin.png";

MyImage.onLoad = chargé ();

}

fonction chargée () {

ImageReady = true;

setTimeout (mise à jour, 1000/30);

}

Fonction redesrw () {

CTX.ClearRect (0, 0, 460, 460)

ctx.fillStyle = "noir";

CTX.Fillrect (0, 0, 460, 460);

// Trouvez l'index des cadres dans l'image

var height = MyImage.NaturalHeight / 5;

var width = myimage.naturalwidth / 5;

var row = math.floor (cadre / 5);

var col = trame - row * 5;

var offw = col * largeur;

var offh = ligne * hauteur;

// First Robin

px = px - 5;

py = py - 5;

if (px <-50) {

px = 300;

}

if (py <-50) {

py = 300;

}

// rate var = (trame + 1) / 22;

// var rw = math.floor (rate * largeur);

// var rh = math.floor (taux * hauteur);

CTX.Drawimage (MyImage, Offw, Offh, Largeur, hauteur, PX, Py, Largeur, hauteur);

// Deuxième Robin

x2 = x2 - 5;

y2 = y2 + 5;

if (x2 <-50) {

x2 = 300;

y2 = 0;

}

CTX.Drawimage (Myimage, Offw, Offh, Largeur, hauteur, x2, Y2, largeur, hauteur);

}

Function Update () {

redessiner ();

cadre ++;

if (trame> = 22) frame = 0;

setTimeout (mise à jour, 1000/30);

}

</cript>

</ head>

<body>

<h1> Demo d'animations en toile HTML - par sombre poisson </h1>

<pre> Play Animations </ Pre>

<div>

</div>

</docy>

</html>

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