Comentário: Primeiro, prepare uma imagem com quadros contínuos e use o método de desenho de tela HTML5 para desenhar diferentes quadros em diferentes intervalos de tempo. Dessa forma, parece que uma animação está tocando. Os principais pontos técnicos e os códigos de exemplo são os seguintes. Amigos interessados podem se referir a ele. Espero que seja útil para todos.
Demonstração de efeito de animação de tela HTML5Principais idéias:
Primeiro, prepare uma imagem com quadros contínuos e use o método de desenho de lona HTML5 para desenhar diferentes quadros em diferentes intervalos de tempo, para que pareça que uma animação esteja sendo reproduzida.
Pontos técnicos -chave:
A função JavaScript setTimeout () possui dois parâmetros. A primeira é que o parâmetro pode passar um método JavaScript.
Outro parâmetro representa o tempo de intervalo, em milissegundos. Exemplo de código:
setTimeout (atualização, 1000/30);
O método API-DRAWIMAGE () do Canvas requer todos os 9 parâmetros:
ctx.drawimage (myimage, offw, offh, largura, altura, x2, y2, largura, altura);
Onde Offw e Offh se referem ao ponto de coordenada inicial da imagem de origem, largura e altura representam a largura e a altura da imagem de origem, tabelas x2 e y2
Mostra o ponto de coordenada inicial da imagem de origem na tela de destino.
O efeito de uma imagem voadora de ganso selvagem de 22 quadros:
Imagem de origem:
Código do programa:
<! Doctype html>
<html>
<head>
<meta http-equiv = "x-ua compatível com" content = "chrome = ie8">
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<title> Demoção de eventos do Mouse de Canvas </ititle>
<link href = "default.css" />
<Cript>
var ctx = null; // contexto 2D variável global
var iniciado = false;
var mtext_canvas = null;
var x = 0, y = 0;
Var quadro = 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 não suportadas. Instale um navegador compatível com HTML5.");
retornar;
}
// Obtenha o contexto 2D da tela e desenhe retangel
ctx = Canvas.getContext ("2D");
ctx.fillstyle = "preto";
ctx.fillRect (0, 0, Canvas.Width, Canvas.Height);
myImage = document.createElement ('img');
myimage.src = "../robin.png";
myImage.onload = carregado ();
}
função carregada () {
imageReady = true;
setTimeout (atualização, 1000/30);
}
função redraw () {
ctx.clearrect (0, 0, 460, 460)
ctx.fillstyle = "preto";
ctx.fillRect (0, 0, 460, 460);
// Encontre o índice de quadros na imagem
altura var = myImage.naturalHeight/5;
var largura = myImage.naturalWidth/5;
var row = math.floor (quadro / 5);
var col = quadro - linha * 5;
var offw = col * largura;
var offh = linha * altura;
// Primeiro Robin
px = px - 5;
py = py - 5;
if (px <-50) {
px = 300;
}
if (py <-50) {
py = 300;
}
// Var Take = (quadro+1) /22;
// var rw = math.floor (taxa * largura);
// var rh = math.floor (taxa * altura);
ctx.drawimage (myimage, offw, offh, largura, altura, px, py, largura, altura);
// Second Robin
x2 = x2 - 5;
y2 = y2 + 5;
if (x2 <-50) {
x2 = 300;
y2 = 0;
}
ctx.drawimage (myimage, offw, offh, largura, altura, x2, y2, largura, altura);
}
função update () {
redraw ();
quadro ++;
if (quadro> = 22) quadro = 0;
setTimeout (atualização, 1000/30);
}
</script>
</head>
<Body>
<h1> html canvas animações demo - por peixes sombrios </h1>
<pre> reproduzir animações </pre>
<div>
<lVAs> </canvas>
</div>
</body>
</html>
Descobri que havia um problema em fazer o upload do formato PNG transparente, então enviei fotos opacas. Você pode substituí -lo por outras fotos. Após a substituição, modifique o número máximo de quadros de 22 para o seu número real de quadros para executar.