为什么我的动画无法通过setinterval清除

Question

I have made a JS code where i make a Canvas and when the user clicks raindrops start falling in infinite loop.

enter code hereMy problem is that i make a "cloud" and i try to make it move through the canvas but instead it shows like it paints the whole path instead of moving.

My code is here:

 setInterval(function () {
  //cear the canvas

  ctx.clearRect(0, 0, c.width, c.height);

  //sxediazoume to fontou
  ctx.fillStyle = "rgb(204, 247, 255)";
  ctx.fillRect(0, 0, c.width, c.height);

  //grass

  ctx.fillStyle = "green";
  ctx.fillRect(0, c.height-20, c.width, c.height);

  //house

  ctx.fillStyle = "#f4e6be";
  ctx.fillRect(50, c.height-20, 100, -80);
  ctx.fillStyle = "black";

  if (makeRain == 1) {

    //moving the Cloud
    for ( var i=0 ; i< c.width/2 ; i+=5) {
      ctx.fillStyle = "#a1a4a8";
      ctx.beginPath();
      ctx.arc(i, i, 40, 0*Math.PI, 2*Math.PI);

      ctx.fill();
    }

}, 10);

also the full code and project can be found in this CodePen

Answer 1

Your for loop seems to be painting the entire cloud in an instant. Instead you can increment its position over time instead of looping.

So let's go from this:

//moving the Cloud
for ( var i=0 ; i< c.width/2 ; i+=5) {
  ctx.fillStyle = "#a1a4a8";
  ctx.beginPath();
  ctx.arc(i, i, 40, 0*Math.PI, 2*Math.PI);

  ctx.fill();
}

To this:

var cloudPos = 0; // somewhere outside the interval

//metakinoude ta Clouds
if (cloudPos >c.width){
  cloudPos = 0;
}
ctx.fillStyle = "#a1a4a8";
ctx.beginPath();
ctx.arc(-20+cloudPos, 100, 40, 0*Math.PI, 2*Math.PI);
ctx.fill();
cloudPos+= 5; // increment position

Live Demo

Answer 2

If you want only 1 cloud, you don't need a for loop. You can put a variable cloud outside of setInterval and change as rain in yPos.

var cloud = 0;
setInterval(function () {

//The code for other things
// ...
//

if (makeRain == 1) {
  cloud += 5;
  cloud %= c.height;
  ctx.fillStyle = "#a1a4a8";
  ctx.beginPath();
  ctx.arc(-20+cloud, 100, 40, 0*Math.PI, 2*Math.PI);
  ctx.fill();
}
}, 10);

The code above will work and you can change it as you want.