Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Trabalhando com imagens

Referente ao curso Lógica de Programação II: Funções, Desenhos e um Jogo

por Guilherme Berteli Mesquita
| 40.9k xp | 89 posts
Estudante

Usei este Codigo que foi fornecido por ajuda do forum,mas mesmo assim ele nao funciona e aparece um erro de loop,que nao para(Uncaught ReferenceError: x is not defined).

<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 = "https://www.facebook.com/photo.php?fbid=972585732821288&set=t.1590233924&type=3&theater";

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

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

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

setInterval(animacao, 30);

</script>
3 respostas
por Guilherme Berteli Mesquita
| 40.9k xp | 89 posts
Estudante

file:///C:/Users/Zombie/Documents/Graficos%20com%20Canvas/Trabalhando%20com%20Imagens%204.1.html

por Cecilia Fernandes
| 45.5k xp | 132 posts
Instrutor Agile coach, desenvolvedora e instrutora (cecifernandes.com)

Oi Guilherme,

ao postar seu código, lembre-se de colocá-lo entre três aspas simples, como indicado no guia de formatação, para que consigamos vê-lo. Clique no botão "Formatação" para aprender como fazer isso. :-)

O que acontece aí é que faltou declarar a variável x fora das funções. Lembre-se que as variáveis ficam restritas ao bloco no qual foram definidas.

Pode tentar isso?

solução!
por Roberto Valdetaro
| 233.7k xp | 57 posts

Guilherme você esqueceu de declarar a variavel var x = 0;

veja o código:

<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 = "grama.png";
var x = 0;
var desenhaImagem = function(x, y) {
    c.drawImage(imagem, x, y)
};

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


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

setInterval(animacao, 30);

</script>