花园鳗鱼 - 纯JavaScript

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

(function () {
  'use strict';
  window.addEventListener('load', function () {
    var canvas = document.getElementById('canvas');

if (!canvas || !canvas.getContext) {
      return false;
    }

/********************
      Random Number
    ********************/

function rand(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }
    
    /********************
      Var
    ********************/

var ctx = canvas.getContext('2d');
    var X = canvas.width = window.innerWidth;
    var Y = canvas.height = window.innerHeight;
    var mouseX = null;
    var mouseY = null;
    var shapeNum = 100;
    var shapes = [];
    var bubbleNum = 50;
    var bubbles = [];
    var rad = Math.PI * 2 / 12;
    var style = {
      black: 'black',
      white: 'white',
      lineWidth: 4,
    };

if (X < 768) {
      shapeNum = 50;
      bubbleNum = 25;
    }

/********************
      Animation
    ********************/

window.requestAnimationFrame =
      window.requestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function(cb) {
        setTimeout(cb, 17);
      };

/********************
      Draw Ground
    ********************/
    
    function drawGround() {
      ctx.save();
      ctx.fillStyle = 'rgb(247, 237, 223)';
      ctx.beginPath();
      ctx.moveTo(0, Y);
      ctx.lineTo(0, Y - Y / 5);
      ctx.lineTo(X, Y - Y / 5);
      ctx.lineTo(X, Y);
      ctx.closePath();
      ctx.fill();
      ctx.restore();
    }
    
    /********************
      Bubble
    ********************/
    
    function Bubble(ctx, x, y, i) {
      this.ctx = ctx;
      this.init(x, y, i);
    }

Bubble.prototype.init = function(x, y, i) {
      this.x = x;
      this.y = y;
      this.r = rand(10, 50);
      this.ga = Math.random() * Math.random();
      this.v = {
        x: 0,
        y: Math.random()
      };
    };

Bubble.prototype.draw = function() {
      var ctx = this.ctx;
      ctx.save();
      ctx.fillStyle = style.white;
      ctx.globalAlpha = this.ga;
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
      ctx.fill();
      ctx.restore();
    };

Bubble.prototype.updatePosition = function() {
      this.x += this.v.x;
      this.y -= this.v.y;
    };

Bubble.prototype.wrapPosition = function() {
      if (this.y < 0 - this.r) this.y = Y + this.r;
    };

Bubble.prototype.render = function() {
      this.updatePosition();
      this.wrapPosition();
      this.draw();
    };

for (var i = 0; i < bubbleNum; i++) {
      var b = new Bubble(ctx, rand(0, X), rand(0, Y));
      bubbles.push(b);
    }

/********************
      Shape
    ********************/
     
    function Shape(ctx, x, y, i) {
      this.ctx = ctx;
      this.init(x, y, i);
    }
    
    Shape.prototype.init = function(x, y, i) {
      this.x = x;
      this.y = y;
      this.i = i;
      this.cx = this.x;
      this.cy = this.y;
      this.l = ((Y - Y / 5) - this.y) / 3;
      if (this.l < 0) this.l *= -1; 
      this.a = rand(0, 360);
      this.rad = this.a * Math.PI / 180;
      this.v = {
        x: 0,
        y: 0
      };
    };
    
    Shape.prototype.draw = function() {
      var ctx  = this.ctx;
      ctx.save();
      ctx.lineWidth = this.l / 5;
      ctx.lineCap = 'round';
      ctx.strokeStyle = style.white;
      ctx.beginPath();
      ctx.moveTo(Math.sin(this.rad) * 10 + this.cx, this.cy);
      ctx.bezierCurveTo(
        Math.cos(this.rad) * 30 + this.x,
        this.y + this.l,
        Math.sin(this.rad) * 10 + this.x,
        this.y + this.l + this.l,
        this.x,
        this.y + this.l + this.l + this.l
      );
      ctx.stroke();
      ctx.fillStyle = 'rgb(190, 228, 226)';
      ctx.beginPath();
      if (this.i % 2 === 0) {
        ctx.arc(Math.sin(this.rad) * 10 + this.cx + this.l / 50, this.cy + this.l / 25, this.l / 30, 0, Math.PI * 2, false);
      } else {
        ctx.arc(Math.sin(this.rad) * 10 + this.cx - this.l / 50, this.cy + this.l / 25, this.l / 30, 0, Math.PI * 2, false);
      }
      ctx.fill();
      ctx.restore();
    };

Shape.prototype.updateParams = function(i) {
      if (i % 2 === 0) {
        this.a += 1;
      } else {
        this.a -= 1;
      }
      this.rad = this.a * Math.PI / 180;
    };

Shape.prototype.collMouse = function() {
      var a = mouseX - this.cx;
      var b = mouseY - this.cy;
      var d = a * a + b * b;
      var dist = Math.sqrt(d);
      if (dist < 100) {
        var colAngle = Math.atan2(mouseY - this.cy, mouseX - this.cx);
        this.v.x = -Math.cos(colAngle) * 2;
        this.v.y = -Math.sin(colAngle) * 2;
        this.cx -= this.v.x;
        this.cy -= this.v.y;
      } else {
        var colAngle = Math.atan2(this.cy - this.y, this.cx - this.x); 
        this.v.x = -Math.cos(colAngle) * 1;
        this.v.y = -Math.sin(colAngle) * 1;
        this.cx += this.v.x;
        this.cy += this.v.y;
      }
    };

Shape.prototype.render = function(i) {
      this.updateParams(i);
      this.collMouse();
      this.draw();
    };

for (var i = 0; i < shapeNum; i++) {
      var s = new Shape(ctx, rand(0, X), rand(Y / 2, Y - Y / 5), i);
      shapes.push(s);
    }

/********************
      Render
    ********************/
    
    function render() {
      ctx.clearRect(0, 0, X, Y);
      for (var i = 0; i < shapes.length; i++) {
        shapes[i].render(i);
      }
      drawGround();
      for (var i = 0; i < bubbles.length; i++) {
        bubbles[i].render();
      }
      requestAnimationFrame(render);
    }

render();

/********************
      Event
    ********************/
    
    function onResize() {
      X = canvas.width = window.innerWidth;
      Y = canvas.height = window.innerHeight;
      shapes = [];
      bubbles = [];
      if (X < 768) {
        shapeNum = 50;
        bubbleNum = 25;
      } else {
        shapeNum = 100;
        bubbleNum = 50;
      }
      for (var i = 0; i < shapeNum; i++) {
        var s = new Shape(ctx, rand(0, X), rand(Y / 2, Y - Y / 5), i);
        shapes.push(s);
      }
      for (var i = 0; i < bubbleNum; i++) {
        var b = new Bubble(ctx, rand(0, X), rand(0, Y));
        bubbles.push(b);
      }
    }

window.addEventListener('resize', function() {
      onResize();
    });

window.addEventListener('mousemove', function(e) {
      mouseX = e.clientX;
      mouseY = e.clientY;
    }, false);

canvas.addEventListener('touchmove', function(e) {
      var touch = e.targetTouches[0];
      mouseX = touch.pageX;
      mouseY = touch.pageY;
    }, false);
    
    canvas.addEventListener('touchend', function(e) {
      var touch = e.targetTouches[0];
      mouseX = null;
      mouseY = null;
    }, false);

});
})();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg