Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Trabalhando com imagens

Não estou conseguindo exibir a imagem no browse.Pq?

meta charset="UTF-8">
<canvas id="tela" width="600" height="400"></canvas>
<script>
var tela= document.getElementById("tela");
var c = tela.getContext("2d");  

 var imagem = new Image();
 imagem.src = "Tabernaculo.png";



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

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

    desenhaImagem(x, 200);
    //circulo(x, 100, x/2);
    x = x + 1;
};
</script>
3 respostas
Você não abriu as chaves na da TAG meta, mas você pode tirar essa linha já que não é necessário tratar caracteres especiais nesse exercício.

Na linha imagem.scr, a imagem "Tabernaculo.png" deve estar no mesmo diretório do seu .html, faça um teste colocando a linha => imagem.src = "http://www.caelum.com.br/imagens/instrutores/fotos/paulo-silveira-90.jpg";

Na linha x=1, você esqueceu de indicar que x é uma variável => var x=1;

Antes da linha "desenhaImagem(x, 100);", Você deve chamar => limpaTela();

E antes de fechar o </script>, adicione a linha => setInterval(desenha, 30);
solução!

//Exemplo:

<canvas id="tela" width="600" height="400"></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 limpaTela = function(){
    c.clearRect(0, 0, 600, 400);
}

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

setInterval(desenha, 30);

</script>

Resolvido, obrigado!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software