2
respostas

Sobre esse exercicio eu colei o codigo somado ao cogido que eu ja tinha escrito, nao funciona

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

var desenha = function() {
    limpaTela();
    circulo(x, 100, 10);
    desenhaImagem(x, 200);
    //circulo(x, 100, x/2);
    x = x + 1;
};
</script>

// o codigo ñ esta rodando ,

2 respostas

Olá Estela,

No seu código você está chamando a função limpa tela (dente outras coisas) porém ele não existe, tente com esse código:

<meta charset="UTF-8" />
<canvas id="tela" width="600" height="400"></canvas>

<script>
var tela = document.getElementById("tela");
var c = tela.getContext("2d");

var circulo = function(x,y,raio){
    //c.fillStyle="blue";
    c.strokeStyle="blue";
    c.beginPath();
    c.arc(x,y,raio,0,2*Math.PI);
    //c.fill();
    c.stroke();
};

var limpaTela = function(){
    c.clearRect(0,0,600,400);
};
var x=1;
var desenha = function(){
    limpaTela();
    //circulo(x,100,x/2);
    desenhaImagen(x,100);
    x+=1;
};

var imagem = new Image();
imagem.src ="http://www.caelum.com.br/imagens/instrutores/fotos/paulo-silveira-90.jpg";

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

setInterval(desenha, 30);

</script>

Att,

Retire as funções que você não irá utilizar, como o limpa tela... etc

  1. Faça uma função definindo como a imagem sera desenhada (desenha) e inclua q funçao "desenhaImagem".
  2. Apresente imagem no código (var imagem = new Image) 3.Crie a função "desenhaImagem".

Comigo funcionou assim!

<meta charset = "ASCII"> 
<canvas id="tela" width="800" height="600"></canvas> 

<script>
var tela = document.getElementById ("tela");
var c = tela.getContext ("2d");

    c.fillStyle = "#FFFAF0"; 
    c.fillRect(0,0,800,600);

var x = 1

var desenha = function () {
    desenhaImagem(x,0);
    x = x + 1;
};

var imagem = new Image();
    imagem.src = "http://www.geekcestchic.com.br/sites/default/files/field/image/1.jpg";

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

setInterval (desenha, 30);

</script>