Exercício imagem 3
<!DOCTYPE html>
<html><head>
<title>Imagens</title></head>
<body>
<canvas id="meu_canvas" width="300" height="300"></canvas>
<script>
// Canvas e contexto
var canvas = document.getElementById('meu_canvas');
var context = canvas.getContext('2d');
// Carregar a imagem
var imagem = new Image();
imagem.src = 'img/explosao.png';
imagem.onload = function() {
context.drawImage(imagem,
80, 10, 60, 65, // Área de recorte
20, 20, 60, 65 // Desenho no Canvas
);
}
</script>
</body>
</html>
-----------------------------------------------------------------------------------------------------------
Exercício imagem4
<!DOCTYPE html>
<html>
<head><title>Imagens</title></head>
<body>
<canvas id="meu_canvas" width="300" height="300"></canvas>
<script>
// Canvas e contexto
var canvas = document.getElementById('meu_canvas');
var context = canvas.getContext('2d');
// Carregar a imagem
var imagem = new Image();
imagem.src = 'img/explosao.png';
imagem.onload = function() {
context.drawImage(imagem,
80, 10, 60, 65, // Área de recorte
20, 20, 60, 65 // Desenho no Canvas
);
context.drawImage(
imagem,
150, 10, 60, 65, // Área de recorte
80, 20, 60, 65 // Desenho no Canvas
);
}
</script>
</body>
</html>
-----------------------------------------------------------------------------------------------------
Exercício Save e restaure
<!DOCTYPE html>
<html>
<head><title>Métodos save e restore</title></head>
<body>
<canvas id="meu_canvas" width="200" height="200"></canvas>
<script>
// Canvas e contexto
var canvas = document.getElementById('meu_canvas');
var context = canvas.getContext('2d');
// Um pequeno quadrado verde
context.fillStyle = 'green';
context.fillRect(50, 50, 25, 25);
// Salvamos a configuração e subimos na pilha
context.save();
// Agora um quadrado roxo
context.fillStyle = 'purple';
context.fillRect(100, 50, 25, 25);
// Voltamos para o nível anterior na pilha
context.restore();
// Voltou para o verde!
context.fillRect(150, 50, 25, 25);
</script>
</body>
</html>
----------------------------------------------------------------------------------------------------------
Exercício Animação1
<!DOCTYPE html>
<html>
<head>
<title>Método window.requestAnimationFrame</title>
</head>
<body>
<canvas id="meu_canvas" width="800" height="300"></canvas>
<script>
// Canvas e contexto
canvas = document.getElementById('meu_canvas');
context = canvas.getContext('2d');
// Dados da bola
var x = 20;
var y = 100;
var raio = 10;
// Momento inicial
var anterior = new Date().getTime();
// Iniciar a animação
requestAnimationFrame(mexerBola);
// Função de animação
function mexerBola() {
// 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 a bola
context.beginPath();
context.arc(x, y, raio, 0, Math.PI*2);
context.fill();
// Deslocar 20 pixels para a direita
var velocidade = 100;
x += velocidade * decorrido / 1000;
// Guardamos o instante para o próximo ciclo
anterior = agora;
// Chamar o próximo ciclo da animação
requestAnimationFrame(mexerBola);
}
</script>
</body></html>
Nenhum comentário:
Postar um comentário