1
resposta

Como mudar a cor do fundo da tela?

Oi pessoal, eu gostaria de saber o porquê a minha tela não fica preta? De acordo com o console não nada de errado e quando eu reinicio a pagina ela fica preta e rapidamente volta ao branco, posso deixar ela preta? Como? Segue o código:

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'black';
    pincel.fillRect(0, 0, 600, 400);

    function desenhaCirculo(x, y, raio) {

        pincel.fillStyle = 'red';
        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);
    x++;
   }

   setInterval(atualizaTela, 10)

</script>

Muito obrigada pela atenção!

1 resposta

Oi, Maria, tudo bem?

Pelo que vejo da atividade, que é uma pequena animação, a ideia é brincar com a tela do canvas e com a bolinha. Você que mudar a cor de fundo de preto para outra cor ou permitir que a tela fique mais tempo em tela?

No caso de mais tempo, você precisa aumentar o milissegundos nessa propriedade, a setInterval setInterval(atualizaTela, 500) que é uma propriedade que chama uma função em um específico intervalo de milissegundos, para saber mais, aqui: https://mdn.beonex.com/en/DOM/window.setInterval.html

No caso da cor, você pode vir nessa linha: pincel.fillStyle = 'green';

Espero ter te ajudado!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software