キャンバスをクリアする

Question

私は現在、雨滴が落ちてキャンバスを作成しようとしていますが、私の唯一の問題は、画面上にスポーンが発生した後にドロップがクリアされないことです。だから、基本的に、すべての青が青くなるまで、キャンバスを塗りつぶし続けます！滴が落ちた後、私はキャンバスをクリアする必要があります。ここで

私の引き分けとセットアップ機能です：

function draw() { 
     drawBackground(); 

     for (var i=0; i< nOfDrops; i++) 
     { 
     ctx.drawImage (rainDrops[i].image, rainDrops[i].x, rainDrops[i].y); //The rain drop 

     rainDrops[i].y += rainDrops[i].speed; //Set the falling speed 
     if (rainDrops[i].y > 450) { //Repeat the raindrop when it falls out of view 
     rainDrops[i].y = -25 //Account for the image size 
     rainDrops[i].x = Math.random() * 600; //Make it appear randomly along the width  
     } 

     } 
    } 

    function setup() { 
     var canvas = document.getElementById('canvasRain'); 

     if (canvas.getContext) { 
       ctx = canvas.getContext('2d'); 

        imgBg = new Image(); 
      imgBg.src = ""; 
     setInterval(draw, 36); 
     for (var i = 0; i < nOfDrops; i++) { 
      var rainDr = new Object(); 
      rainDr["image"] = new Image(); 
      rainDr.image.src = "rain.png"; 



      rainDr["x"] = Math.random() * 600; 
      rainDr["y"] = Math.random() * 5; 
      rainDr["speed"] = 3 + Math.random() * 5; 
      rainDrops.push(rainDr); 

      } 

     } 
    } 

私は私の描画機能にキャンバスをクリアする必要がありますかなり確信しているが、私は場所を正確にかかどうかはわかりません。完全なコードが必要な場合、またはご質問がある場合はお知らせください。ありがとう。全体のキャンバスクリアする

Answer 1

使用clearRect()

：あなたはどこに言えば迷っているならば、あなたは自分のドロー関数の先頭にそれを置くことができます

ctx.clearRect(0, 0, canvas.width, canvas.height)

を、それすべてのフレームの前にクリアされます。