Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

exercício 3 - não consigo exibir a imagem

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>
2 respostas

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>

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>