Entrar Ainda não tem acesso?
1
resposta

Tela não limpa

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Movendo elementos: animações simples e atividade Para saber mais - Movendo a bolinha pelo teclado

por Gabriel Frederico Esmeris
| 30.7k xp | 1 posts
Estudante

Olá, tudo bem? Estou tento dificulade em limpar a tela.

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

<script>

    //var tela
    var tela = document.querySelector('canvas');
    var pen = tela.getContext('2d');

    //fundo
     pen.fillStyle = 'lightgray';
    pen.beginPath();
    pen.fillRect(0, 0, 600, 400);

    function desenha_cirulo(x, y){

        pen.fillStyle = 'blue';
        pen.arc(x, y, 10, 0, 2*Math.PI);
        pen.fill();
    }

    function limpa_tela(){

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


    var baixo = 40;
    var cima = 38;
    var esq = 37; 
    var drt = 39;

    var taxa = 10;

    var x = 300;
    var y = 200;

    function teclado(evento){

        if(evento.keyCode == cima){
            y = y - taxa;
        } else

        if(evento.keyCode == baixo){
            y = y + taxa;
        } else

        if(evento.keyCode == esq){
            x = x - taxa;
        } else

        if (evento.keyCode == drt){
            x = x + taxa;
        }

    }



    function atualiza_tela(){

        limpa_tela();
        desenha_cirulo(x, y);


    }

    document.onkeydown = teclado;

    setInterval(atualiza_tela, 20);


</script>
1 resposta
por GABRIEL DUPLA
| 683.4k xp | 1662 posts
Pessoa Monitora Fórum Ops

Olá Gabriel, tudo bem?

Analisando seu código percebi que não foi definido o inicio do caminho do seu desenho, ou seja, não foi utilizado o beginPath() dentro da sua função desenha_circulo:

function desenha_cirulo(x, y){

        pen.fillStyle = 'blue';
        pen.arc(x, y, 10, 0, 2*Math.PI);
        pen.fill();
    }

A função beginPath() serve para iniciar um novo desenho, é por meio dela que tornamos cada bolinha um item individual, um objeto único que poderá ser apagado após a criação da próxima. Como não declaramos a função, os círculos estão sendo considerados o mesmo objeto, logo, não apaga o círculo anterior. Adicionando a função beginPath() no código de desenho do círculo ela funcionará normalmente:

function desenha_cirulo(x, y){

        pen.fillStyle = 'blue';
        pen.beginPath();
        pen.arc(x, y, 10, 0, 2*Math.PI);
        pen.fill();
    }

Se precisar de ajuda conte conosco!

Um bom dia e bons estudos.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓