Trabalhando com imagens | Lógica de Programação II: Funções, Desenhos e um Jogo

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

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

03/09/2015

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)

14/09/2015

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

| 232.7k xp | 57 posts

04/11/2015

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>