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

Trabalhando com Imagens (Duvida Ex.3 aula 4)

Olá galera, beleza?

já passei desse exercicio mas fiquei com duvida por que usando dessa forma ele não funciona direto, tem que ser usando um setInterval ou um setTimeout.

Detalhe quando eu abro o console e digito c.drawImage(imagem, x, y); ele funciona.

Já consegui fazer funcionar, mas queria uma explicação do por que isso não funciona, pois pra mim não faz sentido.

Desde já agredeço pessoal, segue codigo:

<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 x = 10;
var y = 10;

c.drawImage(imagem, x, y);

</script>
3 respostas

Oi Arthur, tudo bem? Colei seu código aqui e ele funcionou normalmente. Atualizei a página várias vezes e não tive problemas.

Aparece alguma mensagem no console pra você?

solução!

Oi Arthur como você está trabalhando somente no Javascript você precisa de um evento que start a exibição dessa imagem como você não chama desenha e nem usa setInterval você precisa chamar alguem que desenhe. Por 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 x = 10;
var y = 10;
imagem.onload = function () {
  c.drawImage(imagem, x, y);
} 

</script>

Humm tendi, muito 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