H5炫酷特效系列3——瀑布流水特效

这个案例模拟瀑布流水的效果,有点类似喷泉,粒子模拟的水滴会一层一层的下落,很是漂亮。
H5炫酷特效系列3——瀑布流水特效_第1张图片
效果看上去很是炫酷,代码并不是很多,几十行代码搞定,同志们直接复制运行就可以查看效果。


<html>

<head>
  <meta charset="utf-8">
  <title>瀑布流水title>
  <style type="text/css">
    html,
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  style>
head>

<body>
  <canvas id="canvas">canvas>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js">script>
  <script type="text/javascript">
    var canvas = document.getElementById('canvas'),
      c = canvas.getContext("2d"),
      particles = {},
      particleIndex = 0,
      particleNum = 50,
      gravity = 0.7;

    // full screen
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // particle
    function Particle() {

      this.posX = canvas.width / 2; // position X
      this.posY = canvas.height / 8; // position Y
      this.vx = Math.random() * 10 - 5; // velocity X
      this.vy = Math.random() * 10 - 5; // velocity Y
      this.width = 1; // particle width
      this.height = Math.random() * 6 - 3; // particle height

      particleIndex++;
      particles[particleIndex] = this;
      this.id = particleIndex;

      this.life = 0;
      this.death = 140;

      //random color
      this.colors = [
        "rgba(100, 100, 100," + (Math.random() + .5) + ")",
        "rgba(52, 152, 200," + (Math.random() + .5) + ")",
        "rgba(41, 128, 250," + (Math.random() + .5) + ")"
      ];
      this.color = this.colors[Math.floor(Math.random() * 3)];
    }

    // draw
    Particle.prototype.draw = function() {
      this.posX += this.vx;
      this.posY += this.vy;

      this.life++;

      if (this.life >= this.death) {
        delete particles[this.id];
      }

      if (this.posY > (canvas.height - 5)) {
        this.vx *= 0.8;
        this.vy *= -0.5;
        this.posY = (canvas.height - 5);
      }

      this.vy += gravity;

      c.fillStyle = this.color;
      c.fillRect(this.posX, this.posY, this.width, this.height);
    }

    setInterval(function() {
      c.fillStyle = "rgba(0,0,0,0.4)";
      c.fillRect(0, 0, canvas.width, canvas.height);

      for (var i = 0; i < particleNum; i++) {
        new Particle();
      }

      for (var i in particles) {
        particles[i].draw();
      }
    }, 30);
  script>
body>

html>

你可能感兴趣的:(canvas)