Bir tuvalin içinde çizim topları zıplatma, 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);} 

Topun hareket ettiğini görebiliyorum ama önceki konumunu görüyorum. Hareket eden bir topu görmeliydim, bunun yerine tuvalde top boyama gibi bir şerit görüyorum. Birisi bana yardım edebilir mi? this is what I'm seeing in my browser

Answer 1

Çerçeveyi her çizdiğinizde tuvalini temizlemeniz gerekir. Bu, video oyunlarının içeriklerini ekrana yansıtmasıyla aynı yoldur. Burada

Bazı örnekler: How to clear the canvas for redrawing