캔버스 지움

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)

, 당신은 당신의 draw 함수의 시작 부분에 넣을 수 있습니다 그것을 그렇게 매 프레임마다 지울거야.