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().
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.
Pergunta
vini_loock
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_loockLink para o comentário
Compartilhar em outros sites
0 respostass a esta questão
Posts Recomendados
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.