Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Mantendo a cor de fundo do Canvas durante a animação

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 Animações simples

por Paulo José Mitz
| 45.3k xp | 2 posts
Auxiliar Administrativo

Olá,

Notei que toda vez que a função "limpaTela" é chamada, ela também apaga a cor de fundo do canvas juntamente com o que foi desenhado.

Achei uma solução para manter a cor do canvas como pré-definido e assim ficar mais visível a animação dentro do limite da tela.

Dentro da função "limpaTela" após o parâmetro pincel.clearRect, eu adicionei os parâmetros com as definições iniciais da cor e dimensão da tela do canvas.

function limpaTela() {
        pincel.clearRect(0, 0, 600, 400);
        pincel.fillStyle = 'lightgray';
        pincel.fillRect(0, 0, 600, 400);
    }

O resultado final do código ficou assim:

<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) {
        pincel.fillStyle = 'blue';
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }

    var x = 20

    function limpaTela() {
        pincel.clearRect(0, 0, 600, 400);
        pincel.fillStyle = 'lightgray';
        pincel.fillRect(0, 0, 600, 400);
    }

    function atualizaTela() {
        limpaTela();
        desenhaCirculo(x, 20, 10);
        x++;
    }

    setInterval(atualizaTela, 10);

</script>
2 respostas
solução!
por Guilherme Henrique
| 733.8k xp | 2109 posts
Instrutor

Oi Paulo,

Muito bom, você pode também aproveitando a lógica do seu código separar as responsabilidades, deixando o limpar tela somente com a função de limpar e criar uma função para desenhar o fundo, assim:

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

<script>
  var tela = document.querySelector("canvas");
  var pincel = tela.getContext("2d");
  colorirFundo(); // aqui você pode chamar o colorirFundo

  function desenhaCirculo(x, y, raio) {
    pincel.fillStyle = "blue";
    pincel.beginPath();
    pincel.arc(x, y, raio, 0, 2 * Math.PI);
    pincel.fill();
  }

  var x = 20;

  function limpaTela() {
    pincel.clearRect(0, 0, 600, 400);
  }

  function colorirFundo() {
    pincel.fillStyle = "lightgray";
    pincel.fillRect(0, 0, 600, 400);
  }

  function atualizaTela() { // aqui você deixa as regras da aplicação
    limpaTela();
    colorirFundo();
    desenhaCirculo(x, 20, 10);
    x++;
  }

  setInterval(atualizaTela, 10);
</script>

Separar as responsabilidades de cada função é muito importante também, assim as funções não ficam amarradas em alguma regra que vai além do escopo dela.

Parabéns pelo empenho nos estudos!

Continue praticando e qualquer dúvida pode contar com a gente.

por Paulo José Mitz
| 45.3k xp | 2 posts
Auxiliar Administrativo

Entendi, realmente assim fica melhor, caso precise chamar somente a função limpaTela, sem precisar do fundo.

Muito obrigado.