Question

我制作了一个JS代码，在其中制作了Canvas，当用户单击雨滴时，雨滴开始陷入无限循环。

在这里输入代码我的问题是我制造了一个“云”，我试图使其在画布上移动，但相反，它显示出它描绘了整个路径而不是移动。

我的代码在这里：

 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);

完整的代码和项目也可以在此CodePen

中找到

Answer 1

您的for循环似乎可以立即绘制整个云。相反，您可以随着时间的推移增加其位置，而不必循环。

让我们从这里开始：

//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();
}

对此：

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

如果只需要1个云，则不需要for循环。您可以在setInterval之外放置一个可变云，并在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);

上面的代码将起作用，您可以根据需要进行更改。

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

2 个答案: