7
respostas

Meu código que colei para esse exercício não funcionou.

<meta charset = "UTF-8">
<canvas id="tela"whidth="3000"height="1800"></canvas>


<script>
//var tela = document.getElementById("tela");
//var c = tela.getContext("2d")
 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);
    x = x + 1;
};

</script>
7 respostas

Marcelo poste o código aqui, por favor. Sem o código não temos como ajudar. Descreva o problema também, porque facilita bastante.

Marcelo poste o código para que possamos analisa-lo juntos e verificar o erro.

Oi Marcelo, lembre-se sempre de usar ``` antes e depois de seu código, assim ele aparece formatado

Marcelo vamos la o problema é em relação aos códigos:

Primeiro: Esta faltando iniciar a função responsável por desenhar a imagem:

setInterval(desenha, 30);

Segundo: Faltava definir a variável x antes da função desenha para que o mesmo possa ser incrementado:

var x = 1;

Terceiro: Esta faltando a função limpaTela no seu código:

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

Acredito que ao fazer esses ajustes você irá conseguir o resultado semelhante ao da aula, caso precise abaixo se encontra o código completo:

<meta charset = "UTF-8">
<canvas id="tela"whidth="3000"height="1800"></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();
    // circulo(x, 100, 10);
    desenhaImagem(x, 200);
    x = x + 1;
};
setInterval(desenha, 30);
</script>

Espero ter ajudado.

<meta charset = "UTF-8">
<canvas id="tela"whidth="3000"height="1800"></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 = "imagem.jpg";

var desenhaImagem = function(x, y) {
    c.drawImage(imagem, x, y)
};
var x = 1;
var desenha = function() {
    limpaTela();
    // circulo(x, 100, 10);
    desenhaImagem(x, 200);
    x = x + 1;
};
setInterval(desenha, 30);
</script>

Oi Marcelo, tudo certo?

Você ainda tem alguma dúvida aqui? Não deixe de nos avisar!

<meta charset="UTF-8">

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

<script>

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

var circulo = function(x,y,raio) {
    c.fillStyle = "blue";
    c.beginPath();
    c.arc(x,y,raio,0,2*Math.PI);
    c.fill();
}

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();
        //circulo(x, 100, raio/2);
        desenhaImagem(x,100)
        x = x + 1;
        //raio = raio + 1;
}

setInterval(desenha, 10);

</script>