Segue o código do Exercício:
<!DOCTYPE html>
<html>
<head>
<title>Método window.requestAnimationFrame</title>
</head>
<body>
<canvas id="meu_canvas" width="500" height="600"></canvas>
<script>
//Canvas e contexto
canvas = document.getElementById('meu_canvas')
context = canvas.getContext('2d')
//Dados da posição e tamanho da imagem
var x = 20;
var y = 10;
var e = 32;
var d = 64;
var imagem = new Image();
imagem.src = 'img/ovni.png';
imagem.onload = function() {
requestAnimationFrame(mexerOvini);
}
//Momento Inicial
var anterior = new Date().getTime();
//Iniciar a animação
requestAnimationFrame(mexerOvini);
//Função de animação
function mexerOvini(){
//Momento Atual
var agora = new Date().getTime();
//Diferença
var decorrido = agora - anterior;
//Limpar o Canvas
context.clearRect(0, 0, canvas.width, canvas.height);
//Desenhar Ovini
context.beginPath();
context.drawImage(imagem,x,y,d,e);
var velocidade = 20;
y += velocidade * decorrido / 1000;
anterior = agora;
requestAnimationFrame(mexerOvini);
}
</script>
</body>
</html>
Nenhum comentário:
Postar um comentário