2
respostas

duvida sobre limpaTela

olá, no meu codigo eu nao coloquei a funçao limpaTela dentro do atualizatela mas coloquei pincel.fillStyle "lightgrey" e pincel.fillRect(0,0,600,400), e o codigo funcionou normalmente limpando a tela para o proximo desenho mas não entendi a logica alguem saberia explicar pq ele limpa mesmo sem eu pedir para limpar, pq eu entendo que pincel.fillstyle e pincel.fillRect a tela sempre vai ficar cinza dentro do canvas ate ai tudo bem, mas pq o alvo some

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

<script >

var tela= document.querySelector  ("canvas");
var pincel = tela.getContext("2d");
var raio = 10;

pincel.fillStyle = "lightgrey"
pincel.fillRect (0,0,600,400);

function limpaTela(){

    pincel.clearRect(0,0,600,400);
}

function desenhacirculo(x,y,raio,cor){

    pincel.fillStyle =cor
    pincel.beginPath();
    pincel.arc(x,y,raio,0,2 * Math.PI);
    pincel.fill();
}

function desenhaAlvo(x,y){
desenhacirculo(x,y,raio+20, "yellow")
desenhacirculo(x,y,raio+10,"blue")
desenhacirculo(x,y,10,"red")
}

function sorteiaPosicao(maximo){

    return Math.floor(Math.random()*maximo)
}

  function atualizaTela(){
    //limpaTela()
    pincel.fillStyle="lightgrey"
    pincel.fillRect(0,0,600,400);
    var xAlaeatorio = sorteiaPosicao (600);
    var yAleatorio = sorteiaPosicao(400);
    desenhaAlvo(xAlaeatorio,yAleatorio);

}

setInterval(atualizaTela,1000);









</script>
2 respostas

do jeito que você fez, pincel.fillRect vai criar uma nova imagem q vai sobrepor as anteriores "limpando a tela" ele não apaga o alvo, mas pinta por cima, eu fiz de um jeito diferente

function limpaTela(){

    pincel.clearRect(0,0,600,400);

    pincel.fillStyle = 'gray';
    pincel.fillRect(0, 0, 600, 400);

}

assim a função limpa a tela e cria o fundo novamente.

ok, obrigado Wagner.