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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用JavaScript创建五彩纸屑效果相关的知识,希望对你有一定的参考价值。

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

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);
}
<canvas id="canvas"></canvas>

小提琴JS Fiddle link

最终目标:Image

答案

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

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

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

  • 矩形变为三角形
  • 页面以5个三角形开头,然后使用setTimeout每十分之一秒添加一个雪花。 (循环也可以从0雪花开始删除,或者通过更改超时可以更快/更慢地添加雪花。)

小提琴:https://jsfiddle.net/72dun3fx/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
          };
        }
      }
    }
  }
};
<canvas id="canvas"></canvas>
另一答案

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

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

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);
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;
}
<canvas id="canvas"></canvas>
<div class="thankYouBanner">
  <h2>
    Thank You, John Doh
  </h2>
</div>

以上是关于如何使用JavaScript创建五彩纸屑效果的主要内容,如果未能解决你的问题,请参考以下文章

SwiftUI 五彩纸屑动画

HTML5 画布下落的五彩纸屑/雪多个对象

Swift - 添加UIView后无法点击按钮

TableViewController 没有成员“视图”

CSS 五彩导航

CSS 五彩导航