Question

我一直试图让多滴出现，但我似乎无法将它们放入，除非我对每一个都进行硬编码，因为画布使用drawover函数保持刷新，我想使用数组，但我不知道如何应用它。

canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

<canvas id="make"></canvas>

{{1}}

Answer 1

我帮助清理了一点代码。因此，您可以使用ALLOB变量作为＆＃34; drop class＆＃34;的模板类型。您可以创建一个ALLOB变量数组，每个变量都使用不同的参数创建。我利用你在那里的rand函数来随机化ALLOB参数。在for循环中将ALLOB变量添加到数组中。

然后代码的其他部分将以相同的方式工作，但您需要遍历数组，并将删除更改应用于ALLOB的每个实例。

＆＃13;

number_of_drops = 10;

var ALLOB_ARRAY = [];

for ( var i = 0; i < number_of_drops; i ++ ) {

    var ALLOB = {
      speed: rand(1,10),
      recwidth: 3,
      recheight: 3,
      lifetime: rand(5,15),
      xpos: rand(0,window.innerWidth),
      ypos: rand(0,window.innerHeight)
    };
  
  ALLOB_ARRAY.push(ALLOB)

}

function rand(min, max) {
    "use strict";
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

var canvas = document.querySelector("#make");
var ctx = canvas.getContext("2d");

function setCanvasWidth() {
    "use strict";
    ctx.canvas.width = window.innerWidth;
    ctx.canvas.height = window.innerHeight;
}
setCanvasWidth();

function paintover() {
    'use strict';
    ctx.fillStyle = "rgba(0, 0, 0, 0.12)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function fall() {
    'use strict';
    for (var i = 0; i < ALLOB_ARRAY.length; i ++ ) {
      ALLOB_ARRAY[i].ypos = ALLOB_ARRAY[i].ypos + ALLOB_ARRAY[i].speed;
      if (ALLOB_ARRAY[i].ypos > canvas.height - ALLOB_ARRAY[i].lifetime) {
        ALLOB_ARRAY[i].ypos = 10;
      }
    }
}
function drawdrops() {
    'use strict';
    ctx.fillStyle = "#1cbc61";
    for (var i = 0; i < ALLOB_ARRAY.length; i ++ ) {
    	ctx.fillRect(
      	ALLOB_ARRAY[i].xpos, 
        ALLOB_ARRAY[i].ypos, 
        ALLOB_ARRAY[i].recwidth, 
        ALLOB_ARRAY[i].recheight
      );
    }
       
}

function animate() {
    "use strict";
    paintover();
    drawdrops();;
    fall();
}

setInterval(animate, 30);

＆＃13;

canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

＆＃13;

<canvas id="make"></canvas>

＆＃13;

Answer 2

我编辑制作者在随机x / y位置产生'下降'。这些丢弃被添加到ALLOB变量中。

在paintover func中，您循环浏览ALLOB集合并在列表中绘制每个drop。

我也为每一滴掉的速度做了一个很好的效果：）

这应该是一个很好的起点。

var ALLOB = [];

function rand(min, max) {
  "use strict";
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function setCanvasWidth() {
  "use strict";
  ctx.canvas.width = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
}

function paintover() {
  'use strict';
  ctx.fillStyle = "rgba(0, 0, 0, 0.12)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ALLOB.forEach(function(droplet) {
    drawdrop(droplet);
  });
  window.requestAnimationFrame(paintover);
}

function fall(droplet) {
  'use strict';
  droplet.ypos += droplet.speed;
  if (droplet.ypos > canvas.height - droplet.lifetime) {
    droplet.ypos = 10;
  }
}

function drawdrop(droplet) {
  'use strict';
  ctx.fillStyle = "#1cbc61";
  ctx.fillRect(droplet.xpos, droplet.ypos, droplet.recwidth, droplet.recheight);
  fall(droplet)
}

function maker() {
  "use strict";
  ALLOB.push({
    speed: rand(1.5, 3.5),
    recwidth: 5,
    recheight: 5,
    minvalue: 100,
    maxvalue: 900,
    lifetime: 10,
    xpos: rand(-10, window.innerWidth + 10),
    ypos: rand(-10, window.innerHeight + 10)
  });

}

function animate() {
  "use strict";
  var maxDrops = 100;
  if (ALLOB.length < maxDrops) {
    window.setInterval(function() {
      if (ALLOB.length < maxDrops) {
        maker();
      }
    }, 30);
  }
  window.requestAnimationFrame(paintover);
}

var canvas = document.querySelector("#make");
var ctx = canvas.getContext("2d");
setCanvasWidth();

animate();

canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

<canvas id="make"></canvas>

如何在制造商功能中没有编码单一的多滴？

2 个答案: