キャンバス内でボールが跳ね返ってきて、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);} 

私はボールが動くのを見ることができますが、私はその前の位置を見ています。私はボールが動くのを見なければならないのではなく、キャンバスにボールの絵のようなものがあるのを見ています。誰か助けてくれますか？ this is what I'm seeing in my browser

Answer 1

フレームを描画するたびにキャンバスをクリアする必要があります。これは、ビデオゲームが画面上にコンテンツをレンダリングするのと同じ方法です。

ここにいくつかの例： How to clear the canvas for redrawing