Bouncing Bälle zeichnen in einer Leinwand, Javascript

Question

function refBalls(){ 
var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
var circles = [{x:40,y:100,r:20,color:'black',vx:5,vy:10}] 
function draw(){ 
    ctx.beginPath(); 
    ctx.arc(circles[0].x, circles[0].y, circles[0].r, 0, 2 * Math.PI); 
    ctx.fillStyle = "blue"; 
    ctx.fill(); 
    if((circles[0].x + circles[0].r + circles[0].vx > c.width + c.style.left) || (circles[0].x - circles[0].r + circles[0].vx < c.style.left)){ 
     circles[0].vx = -circles[0].vx; 
    } 
    circles[0].x += circles[0].vx; 
    requestAnimationFrame(draw); 
} 
requestAnimationFrame(draw);} 

Ich bin in der Lage zu sehen, den Ball bewegt, aber ich sehe seine vorherige Position. Ich sollte ein Ball bewegt werden sehen, stattdessen bin ich auf der Leinwand einen Streifen wie ein Ball Gemälde zu sehen. Kann mir jemand helfen? this is what I'm seeing in my browser

Answer 1

Sie benötigen, um Ihre Leinwand Sie den Rahmen ziehen jedes Mal zu löschen. Dies ist die gleiche Art und Weise Videospiele ihren Inhalt auf den Bildschirm übertragen.

Einige Beispiele hier: How to clear the canvas for redrawing