Duvida Ex.3 aula 4

Olá Ivan,

para que a imagem fique para você pode usar uma função chamada setTimeout. A setInterval não tem o proposito de chamar a função apenas uma vez.

Algo do tipo: setTimeout(desenhaImagem, 60);

Att,

Oi Ramon, mas o objetivo é so abrir a imagem. Por que o desenhaImagem puro não funciona? Ele no setInterval roda normal.

Alguém?

Estou com a mesma duvida, por que não funciona só chamando a função direto, sem o setInterval e sem o setTimeout. Alguém saberia explicar?

Meu 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>

Detalhe, se eu chamo (esta linha abaixo) direto no console ela funciona.

c.drawImage(imagem, x, y);

Olá, amigo! Bem, você poderia arranjar um jeito de bular o sistema, como exemplo:

1. Retirando da sua função desenhaImagem o "x++;" e declarar assim: setInterval(desenhaImagem);

<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 = "http://www.caelum.com.br/imagens/instrutores/fotos/paulo-silveira-90.jpg";

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 x = 100;

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

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

setInterval(desenhaImagem);

</script>

ou

1. exercendo um pouco mais de aprofundamento. Para o exemplo, utilizei um botão para parar o setInterval, desta forma:

<meta charset="UTF-8">

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

<button onclick="funcaoParar()">Parar o setInterval</button>

<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 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 x = 100;

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

var desenhaImagem = function() {
    limpaTela();
    c.drawImage(imagem, x, 100);
    x++;
};

var minhaVariavel = setInterval(desenhaImagem, 10);
function funcaoParar() {
    clearInterval(minhaVariavel);
}

</script>

Atenciosamente, Brendo Santiago.

Olá galera,

bom vamos por partes aqui. Primeiro Ivan, no seu código você tenta chamar a função, mas só passou o nome dela. Para pedir a execução de uma função você precisa colocar os parênteses no final: desenhaImagem().

Agora, com relação a dúvida do Artur que também vai valer para o Ivan. Artur, você abriu o código no Chorme? Tente usar um outro navegador se foi o caso, como o Firefox, que deve funcionar do jeito que você espera. O problema é que nas últimas versôes o Chorme alterou alguns comportamentos do seu navegador referentes ao javascript e um deles foi a função drawImage. Aparentemente ele só está desenhando na tela quando a função é chamada depois que a tela terminou de carregar, ou seja, no caso de vocês quando já leu todo o <script>.