clearRect no funciona

Question

Estoy haciendo un juego de Pong en javascript para aprender a hacer juegos, y quiero hacerlo orientado a objetos.

No consigo clearRect para que funcione. Todo lo que hace es trazar una línea que crece más. Este es el código correspondiente:

function Ball(){ 
    this.radius = 5; 
    this.Y = 20; 
    this.X = 25; 
    this.draw = function() { 
     ctx.arc(this.X, this.Y, this.radius, 0, Math.PI*2, true); 
     ctx.fillStyle = '#00ff00'; 
     ctx.fill(); 
    }; 
} 

var ball = new Ball(); 

function draw(){ 
    player.draw(); 
    ball.draw(); 
} 

function update(){ 
    ctx.clearRect(0, 0, 800, 400); 
    draw(); 
    ball.X++; 
} 

He tratado de poner la parte ctx.clearRect en los draw() y ball.draw() funciones y no funciona. También probé fillRect con blanco, pero da los mismos resultados. ¿Cómo puedo solucionar esto?

Answer 1

Su real problema es que no está cerrando la ruta de su círculo.

Agregue ctx.beginPath() antes de dibujar el círculo.

jsFiddle.

Además, algunos consejos ...

• Sus activos no debería ser responsable de elaborar ellos mismos (su método draw()). En su lugar, quizás defina sus propiedades visuales (¿es un círculo? Radio?) Y permita que su función de representación principal maneje el dibujo específico canvas (esto también tiene la ventaja de que puede cambiar fácilmente su procesador a elementos DOM normales o WebGL más adelante) .
• En lugar de setInterval(), use requestAnimationFrame(). El soporte no es tan bueno en este momento, por lo que es posible que desee mejorar su funcionalidad con setInterval() o el patrón recursivo setTimeout().
• Su clearRect() debe pasar las dimensiones del elemento canvas (o tenerlas definidas en algún lugar). Incluirlos en sus funciones de representación es similar a números mágicos y podría llevar a un problema de mantenimiento más adelante en la pista.