Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido)Limpar o canvas


vini_loock

Pergunta

Olá, estou tentando fazer animação simples com o canvas, mas estou com um problema na hora de limpar o palco e renderizar o próximo frame, ele simplesmente não limpa o que foi criado com o método arc().

Segue o código:

(function(){
    
    var bg = {
        canvas: null,
        context: null,
        config: {
            width: 500,
            height: 500
        },
        color: {
            bgColor: '#00FF00',
            circleBorder: '#000000'
        },
        start: function(){
            this.canvas = document.getElementById('canvas');
            this.context = this.canvas.getContext('2d');
            this.config.width = this.canvas.offsetWidth;
            this.config.height = this.canvas.offsetHeight;
        },
        render: function(){
            this.context.clearRect(0, 0, this.config.width, this.config.height);
            this.context.fillStyle = this.color.bgColor;
            this.context.fillRect(0, 0, this.config.width, this.config.height);
            this.renderCircle(0);
        },
        renderCircle: function(n){
            this.context.strokeStyle = this.color.circleBorder;
            this.context.arc(this.circles[n].x, this.circles[n].y, this.circles[n].r, Math.PI*2, false);
            this.circles[n].x++;
            this.circles[n].y++;
            this.context.stroke();
        },
        circles: [{r: 50, x: 100, y: 60, dx: 1, dy: 1}]
    }

    window.addEventListener('load', function(){
        bg.start();
        bg.render();
        window.setInterval(function(){
            bg.render();
        }, 20);
    }, false);
    
})();

O objetivo era que ele mostrasse um circulo se movendo do topo esquerdo para o canto inferior direito, isso até acontece, mas fica um rastro onde ele passou, justamente por não estar "limpando" o canvas.

Eu já tinha feito algo semelhante antes, mas não sei o porque que agora está com este problema.

Vo ficar tentando aqui, se alguém consegui, da um help ai.

Vlw.

Vinicius.

Nossa, olha só, era só adicionar um context.beginPath();

Parece que ao postar no fórum a resposta vem automaticamente.

Desculpem-me, mas isso realmente não passou à minha cabeça antes.

Editado por vini_loock
Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,1k
    • Posts
      651,8k
×
×
  • Criar Novo...