如何使用JavaScript创建五彩纸屑效果

Question

我想创建一个五彩纸屑效果（附加屏幕截图），其中片状应为三角形（目前它们是RECTANGULAR）。我使用以下JavaScript代码来获得效果。但是，当网页打开时，我希望片状物从上到下开始下降。就在我们打开页面的那一刻，页面被薄片淹没了。我在寻找，我怎么能让屏幕空白并使薄片缓慢下来。任何人都可以帮我解决这个问题：

＆＃13;

＆＃13;

window.onload = function() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var W = window.innerWidth;
  var H = window.innerHeight;
  canvas.width = W;
  canvas.height = H;

  var mp = 1000; //max particles
  var particles = [];
  for (var i = 0; i < mp; i++) {
    particles.push({
      x: Math.random() * W, //x-coordinate
      y: Math.random() * H, //y-coordinate
      r: Math.random() * 18 + 1, //radius
      d: Math.random() * mp, //density
      color: "rgba(" + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", 0.8)",
      tilt: Math.floor(Math.random() * 5) - 5
    });
  }

  //Lets draw the flakes
  function draw() {
    ctx.clearRect(0, 0, W, H);
    for (var i = 0; i < mp; i++) {
      var p = particles[i];
      ctx.beginPath();
      ctx.lineWidth = p.r;
      ctx.strokeStyle = p.color; // Green path
      ctx.moveTo(p.x, p.y);
      ctx.lineTo(p.x + p.tilt + p.r / 2, p.y + p.tilt);
      ctx.stroke(); // Draw it
    }

    update();
  }

  var angle = 0;

  function update() {
    angle += 0.01;
    for (var i = 0; i < mp; i++) {
      var p = particles[i];
      p.y += Math.cos(angle + p.d) + 1 + p.r / 2;
      p.x += Math.sin(angle) * 2;
      if (p.x > W + 5 || p.x < -5 || p.y > H) {
        if (i % 3 > 0) //66.67% of the flakes
        {
          particles[i] = {
            x: Math.random() * W,
            y: -10,
            r: p.r,
            d: p.d,
            color: p.color,
            tilt: p.tilt
          };
        }
      }
    }
  }
  setInterval(draw, 20);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

小提琴JS Fiddle link

结束目标：Image

Answer 1

要制作三角形，您需要绘制一个形状，而不是画一条粗线。

    setContentView(rootView);
    rootView.addView(container);
    container.addView(createParty);
    container.addView(joinParty);

更新以下代码以执行您想要的任何操作：

• 矩形更改为三角形
• 页面以5个三角形开头，然后使用// Rectangle ctx.strokeStyle = p.color; ctx.moveTo(p.x, p.y); ctx.lineTo(p.x + p.tilt + p.r / 2, p.y + p.tilt); ctx.stroke(); // Triangle ctx.fillStyle = p.color; ctx.moveTo(p.x, p.y); ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(p.x + 10, p.y); ctx.lineTo(p.x + 5, p.y + 10); ctx.fill(); 每十分之一秒添加一个雪花。 （也可以删除循环以从0雪花开始，或者通过更改超时来更快/更慢地添加雪花。）

小提琴：https://jsfiddle.net/72dun3fx/13/

＆＃13;

＆＃13;

setTimeout

＆＃13;

window.onload = function() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var W = window.innerWidth;
  var H = window.innerHeight;
  var particles = [];
  var angle = 0;
  canvas.width = W;
  canvas.height = H;

  // Add starting particles
  for (var i = 0; i < 5; i++) {
    addParticle();
  }
  // Add a particle every tenth of a second
  setInterval(addParticle, 100);
  // Update the particles so they fall
  setInterval(draw, 20);

  // Add a single particle
  function addParticle() {
    if (particles.length > 1000) {
      return false;
    }

    particles.push({
      x: Math.random() * W, //x-coordinate
      y: Math.random() * H, //y-coordinate
      r: Math.random() * 18 + 1, //radius
      d: Math.random() * particles.length, //density
      color: "rgba(" + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", 0.8)",
      tilt: Math.floor(Math.random() * 5) - 5
    });
  }

  /* Draw the particles */
  function draw() {
    ctx.clearRect(0, 0, W, H);
    for (var i = 0; i < particles.length; i++) {
      var p = particles[i];
      ctx.beginPath();
      ctx.lineWidth = p.r;
      ctx.fillStyle = p.color;
      ctx.moveTo(p.x, p.y);
      ctx.beginPath();
      ctx.moveTo(p.x, p.y);
      ctx.lineTo(p.x + 10, p.y);
      ctx.lineTo(p.x + 5, p.y + 10);
      ctx.fill();
    }

    update();
  }

  function update() {
    angle += 0.01;
    for (var i = 0; i < particles.length; i++) {
      var p = particles[i];
      p.y += Math.cos(angle + p.d) + 1 + p.r / 2;
      p.x += Math.sin(angle) * 2;
      if (p.x > W + 5 || p.x < -5 || p.y > H) {
        if (i % 3 > 0) //66.67% of the flakes
        {
          particles[i] = {
            x: Math.random() * W,
            y: -10,
            r: p.r,
            d: p.d,
            color: p.color,
            tilt: p.tilt
          };
        }
      }
    }
  }
};

＆＃13;

＆＃13;

＆＃13;

Answer 2

我对上面的答案进行了轻微编辑，以便根据您的规格进一步调整。编辑Y组件，使三角形不能越过画布的中间。其次，使三角形从画布的顶部开始。希望这会有所帮助。

编辑：这是你在找什么？
旁注：我在draw（）函数中添加了一个Math.random（）* 7，因为我认为效果很酷，但是如果你不喜欢它，请用10替换它（这就是设置为之前。

＆＃13;

＆＃13;

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var W = window.innerWidth;
var H = window.innerHeight - 30;
canvas.width = W;
canvas.height = H;

var particles = [];
for (var i = 0; i < 100; i++) {
  addParticle();
}
setInterval(addParticle(), 10);

/* Add a single particle */
function addParticle() {
  if (particles.length > 1000) {
    return false;
  }

  particles.push({
    x: Math.random() * W, //x-coordinate
    y: H, //y-coordinate
    r: Math.random() * 18 + 1, //radius
    d: Math.random() * particles.length, //density
    color: "rgba(" + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", 0.8)",
    tilt: Math.floor(Math.random() * 5) - 5
  });
}

/* Draw the particles */
function draw() {
  ctx.clearRect(0, 0, W, H);
  for (var i = 0; i < particles.length; i++) {
    var p = particles[i];
    ctx.beginPath();
    ctx.lineWidth = p.r;
    ctx.fillStyle = p.color;
    ctx.moveTo(p.x, p.y);
    ctx.beginPath();
    ctx.moveTo(p.x, p.y);
    ctx.lineTo(p.x + 10, p.y);
    ctx.lineTo(p.x + 5, p.y + (Math.random() * 7));
    ctx.fill();
  }

  update();
}

var angle = 0.02;

function update() {
  for (var i = 0; i < particles.length; i++) {
    var p = particles[i];
    p.y += Math.cos(angle) + 1 + p.r / 10;
    p.x += Math.sin(angle) * 2;
    if (p.x > W + 5 || p.x < -5 || p.y > H) {
      if (i % 3 > 0) //66.67% of the flakes
      {
        particles[i] = {
          x: Math.random() * W,
          y: -10,
          r: p.r,
          d: p.d,
          color: p.color,
          tilt: p.tilt
        };
      }
    }
  }
}
setInterval(draw, 20);

＆＃13;

canvas {
  z-index: 999;
}

.thankYouBanner {
  position:absolute;
  height:30px;
  bottom:20%;
  left:50%;
  z-index: 1000;
}

.thankYouBanner h2 {
  position:relative;
  text-align:center;
  width: 100%;
  left: -50%;
  color: #fff;
  background-color: rgba(0,0,0,0.6);
  box-shadow: 0 0 15px 10px #fff;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 10px;
}

＆＃13;

<canvas id="canvas"></canvas>
<div class="thankYouBanner">
  <h2>
    Thank You, John Doh
  </h2>
</div>

＆＃13;

＆＃13;

＆＃13;