Dúvida no Ex. 3 da Aula 4 - Movendo elementos: animações simples

Pedro peço que poste seu código para analisarmos juntos e verificar o problema.

O código que fiz foi este:

" "

Estou pelo celular agora mas consegui pegar o código que fiz. Sei que algo está errado mas não consigo achar o erro. Fiz o que se pediu o exercício mas talvez eu tenha entendido errado e feito o código incorreto.

O código que fiz foi este:

"<canvas id="tela" width="600" height="400"></canvas>

<script>

var tela = document.getElementById("tela");
var c = tela.getContext("2d");


var limpaTela = function() {
    c.clearRect(0,0,600,400);
}

var x = 1;

var desenha = function() {
    limpaTela();
    circulo(x, 100, 10);
    x = x + 1;
}

var imagem = new Image();
imagem.src = "http://www.caelum.com.br/imagens/instrutores/fotos/paulo-silveira-90.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;
};

setInterval(desenha, 30);
</script>"

Fala Pedro não consigo ver o seu código. Teria como postar novamente?

<script>

var imagem = new Image();
imagem.src = "http://www.caelum.com.br/imagens/instrutores/fotos/paulo-silveira-90.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>

Tive que tirar o "<" do script porque código não estava aparecendo.

Pedro para postar códigos formatados você deve inseri-los entre três crases(`), tem um botão lado direito dando dicas de formatação.

Vamos la, o problema do seu código esta nesse trecho:

var desenha = function() {
    limpaTela();
    circulo(x, 100, 10);
    desenhaImagem(x, 200);
    //circulo(x, 100, x/2);
    x = x + 1;
};

A função circulo não existe mais, onde sua chamada acarretará em erro, apenas apague-a e o problema deve ser resolvido.

var desenha = function() {
    limpaTela();
    desenhaImagem(x, 200);
    x = x + 1;
};

Espero ter ajudado

Consertei o código, mas quando abro no browser, a página fica em branco.

Veja seu console, deve estar dando algum problema, poste a saída para mim.

Pois para rodar seu código aqui apenas retirei a chamado a função circulo.

Fico no aguardo

Eu vi o console, la diz que não esta dando nenhum problema. Como faço para consertar?

Pedro rode exatamente com esse código

<canvas id="tela" width="600" height="400"></canvas>

<script>

var tela = document.getElementById("tela");
var c = tela.getContext("2d");

var limpaTela = function() {
    c.clearRect(0,0,600,400);
}

var imagem = new Image();
imagem.src = "http://www.caelum.com.br/imagens/instrutores/fotos/paulo-silveira-90.jpg";

var desenhaImagem = function(x, y) {
    c.drawImage(imagem, x, y)
};

var x = 1;
var desenha = function() {
    limpaTela();
    desenhaImagem(x, 200);
    x = x + 1;
};

setInterval(desenha, 30);
</script>

Para mim esta funcionando.

Agora funcionou! Obrigado Matheus!

De nada Pedro, sempre que precisar não deixe de criar suas dúvidas.

Provavelmente o erro estava no c.drawImage(imagem, x, y); Ele devia esta colocando c.drawImage( Imagem , x, y); o I de imagem esta causando o erro provavelmente.