Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Canvas, Porque a tela não fica cinza?

Porque a tela não fica cinza conforme pincel.fillStyle = 'lightgray' ?

o comando está no código mais quando executado a tela fica toda branca?

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(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 limpaTela(){
            pincel.clearRect(0, 0, 600, 400);
        }
        var x = 20;
        function atualizaTela() {
            limpaTela();
            desenhaCirculo (x, 20, 10, 'blue');
            desenhaCirculo (x, 50, 10, 'green');
            x++;
        }

        setInterval(atualizaTela,10);
</script>
1 resposta
solução!

Olá Giuliano, tudo ok por aí ?

Sobre a sua dúvida, no código que você fez aparece a tela cinza.

Contudo ela aparece por uma porção de milissegundos, e que a olho nu é muito difícil de se ver.

Para ver ela você pode comentar a linha que contém o setInterval(atualizaTela,10); e com isso você poderá ver o seguinte:

Print da tela de um computador em recorte mostrando um canvas cinza na parte superior esquerda ocupando quase toda a tela.

Como você pode ver, ela está ali. Contudo, quando passa 10 milissegundos, ela some e as bolinhas que começam à ser “animadas” são desenhadas para passarem pela tela.

Print da tela de um computador em recorte mostrando duas bolinhas no canto superior esquerdo da tela, uma bolinha azul na parte mais superior e uma bolinha verde abaixo dela

Se você quiser ver isso acontecendo você pode aumentar o tempo do setInterval para o valor de 100, que ele fica mais visível, e caso você queira ver essa transição perfeitamente bem aumente o tempo do setInterval para 1000, assim a mudança ficará bem visível.

Em síntese era isso, espero ter ajudado. Caso tenha mais dúvidas recorra ao fórum novamente.

Estarei à disposição.

Um grande abraço e bons estudos.

Caso este post tenha lhe ajudado, por favor, marcar como solução! ✓.