Não entendi ... como ficaria o código completo para trabalhar com imagem ?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Não entendi ... como ficaria o código completo para trabalhar com imagem ?
Olá Fabricio! O código ficaria assim:
<canvas id="tela" width ="600" height = "400"></canvas>
<script>
var tela = document.getElementById("tela");
var p = tela.getContext("2d");
var x = 0;
var imagem = new Image();
imagem.src = "http://www.caelum.com.br/imagens/instrutores/fotos/paulo-silveira-90.jpg";
var desenhaImagem = function(x, y) {
p.drawImage(imagem, x, y)
};
var limpaTela = function(){
p.clearRect(0, 0, 600, 400);
}
var animacao = function(){
limpaTela();
desenhaImagem(x, 100)
x += 1;
}
setInterval(animacao, 30);
</script>E como ele diz no exercício, é o mesmo que trabalhar com o circulo. Porém primeiramente você atribui uma imagem a variável:
var imagem = new Image();
imagem.src = "http://www.caelum.com.br/imagens/instrutores/fotos/paulo-silveira-90.jpg";Depois você utiliza a função desenhaImagem dada no exercicio para desenhar a imagem que você atribuiu a variável:
var desenhaImagem = function(x, y) {
p.drawImage(imagem, x, y)
};Por fim, você poe sua função dentro da função animacao e a chama para que a funcione. Lembrando sempre de atribuir o intervalo também :
var animacao = function(){
limpaTela();
desenhaImagem(x, 100)
x += 1;
}
setInterval(animacao, 30);Espero que eu tenha ajudado. Bons Estudos!
Romário, Muito Obrigado !!
De nada Fabricio. Lembre-se de fechar esse forum caso sua dúvida foi solucionada. Se não foi ainda, só perguntar que to aqui pra ajudar e outras pessoas também.
Qual a diferença de c.drawImage para p.drawImage como fez no exemplo do Romário ?
Olá Flavio! A diferença é apenas o nome da variavel.
Em c.drawImage a variavel é c e em p.drawImagea variavel é p. Só muda o nome.
Atá entendi achava que mudava alguma propriedade dentro da função .
Muito obrigado !!