Método de dibujo de lona HTML5 para crear un ejemplo de efecto de animación

Autor：Eve Cole Fecha de actualización：2025-05-08 10:48:02

Comentario: Primero, prepare una imagen con marcos continuos y luego use el método de dibujo del lienzo HTML5 para dibujar diferentes marcos a diferentes intervalos de tiempo. De esta manera, parece que se está reproduciendo una animación. Los puntos técnicos clave y los códigos de ejemplo son los siguientes. Los amigos interesados pueden referirse a él. Espero que sea útil para todos.

Demostración de efecto de animación de lona HTML5

Ideas principales:

Primero, prepare una imagen con marcos continuos y luego use el método de dibujo del lienzo HTML5 para dibujar diferentes marcos a diferentes intervalos de tiempo, para que parezca que se está reproduciendo una animación.

Puntos técnicos clave:

La función JavaScript setTimeOut () tiene dos parámetros. El primero es que el parámetro puede pasar un método JavaScript.

Otro parámetro representa el tiempo de intervalo, en milisegundos. Ejemplo de código:

setTimeout (actualización, 1000/30);

El método API-DrawImage () de Canvas requiere los 9 parámetros:

ctx.DrawImage (myimage, offw, offh, ancho, altura, x2, y2, ancho, altura);

Donde Offw y OffH se refieren al punto de coordenada inicial de la imagen de origen, el ancho y la altura representan el ancho y la altura de la imagen de origen, las tablas X2 e Y2

Muestra el punto de coordenada inicial de la imagen de origen en el lienzo de destino.

El efecto de una imagen voladora de 22 cuadros de ganso salvaje:

Imagen de origen:

Código de programa:

<! Doctype html>

<html>

<title> Demo de eventos de lata de lienzo </title>

var ctx = null; // Contexto 2D variable global

var iniciado = falso;

var mtext_canvas = null;

var x = 0, y = 0;

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

var ImagreAdy = false;

var myImage = nulo;

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 ("lienzo no es compatible. Instale un navegador compatible HTML5");

devolver;

}

// Obtener un contexto 2D de lienzo y dibujar rectangel

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

ctx.fillstyle = "negro";

ctx.fillrect (0, 0, Canvas.Width, Canvas.Height);

myImage = document.createElement ('img');

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

myImage.Onload = Loaded ();

}

función cargada () {

Imageready = True;

setTimeout (actualización, 1000/30);

}

función redraw () {

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

ctx.fillstyle = "negro";

ctx.fillrect (0, 0, 460, 460);

// Encuentra el índice de marcos en la imagen

Var altura = myImage.naturalHeight/5;

Var ancho = myImage.NaturalWidth/5;

var fila = math.floor (marco / 5);

var col = marco - fila * 5;

var Offw = col * ancho;

var OffH = fila * altura;

// Primero Robin

Px = Px - 5;

py = py - 5;

if (px <-50) {

PX = 300;

}

if (py <-50) {

py = 300;

}

// tasa var = (marco+1) /22;

// var rw = math.floor (tasa * ancho);

// var rh = math.floor (tasa * altura);

ctx.Drawimage (myimage, offw, offh, ancho, altura, px, py, ancho, altura);

// segundo robin

x2 = x2 - 5;

y2 = y2 + 5;

if (x2 <-50) {

x2 = 300;

y2 = 0;

}

ctx.DrawImage (myimage, offw, offh, ancho, altura, x2, y2, ancho, altura);

}

Function Update () {

Redraw ();

marco ++;

if (marco> = 22) marco = 0;

setTimeout (actualización, 1000/30);

}

</script>

</ablo>

<Body>

<h1> HTML Demo de animaciones de lona - por pescado sombrío </h1>

<pre> Reproducir animaciones </pre>

<div>

</div>

</body>

</html>

Descubrí que había un problema con la carga de formato PNG transparente, por lo que subí las imágenes opacas. Puede reemplazarlo con otras imágenes. Después del reemplazo, modifique el número máximo de cuadros de 22 a su número real de cuadros para ejecutar.