Pessoal meu código para trazer a imagem não funciona referente ao exercídio 3, segue o código abaixo:
<script>
var imagem = new Image();
imagem.src = "arara.jpg";
var desenhaImagem = function(x, y) {
c.drawImage(imagem, x, y)
};
var desenha = function() {
limpaTela();
circulo(x, 100, 10);
desenhaImagem(x, 200);
//circulo(x, 100, x/2);
x = x + 1;
};
</script>
Bom dia Luziane!
Altere a 3ª linha para :
imagem.src = "http://www.caelum.com.br/imagens/instrutores/fotos/paulo-silveira-90.jpg";Adicione a função limpa tela:
var limpaTela = function(){
c.clearRect(0, 0, 600, 400);
}E altere a função desenha:
var x = 1;
var desenha = function(){
limpaTela();
desenhaImagem(x, 100);
x = x + 1;
}Após a função desenha, informe o intervalo (antes de fechar o script):
setInterval(desenha, 30);
</script>
Olá, Luziane e Ewerton! Eu tive o mesmo problema com o meu código, mas depois de acrescentar as tags do html e mandar carregar na tag body assim:
<body onload="desenhaImagem(0,0)"> a função que desenha a imagem, deu certo, tomara que ajude:
<!DOCTYPE HTML>
<html>
<head>
<title>Animação</title>
<meta charset="utf-8">
</head>
<body onload="desenhaImagem(0,0)">
<canvas id = "tela" width = "480" height = "480" style="border:1px solid #d3d3d3;"> </canvas>
<script>
var tela = document.getElementById("tela");
var c = tela.getContext("2d");
var imagem = new Image();
imagem.src = "Meu instantâneo 1.png";
var desenhaImagem = function(x, y) {
c.drawImage(imagem, x, y);
};
var limpaTela = function() {
c.clearRect(0, 0, 600, 400);
};
</script>
</body>
</html>