线条

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

{
      this.y -= this.speed;
      this.i += this.seed;
    } }, { key: 'draw', value: function draw(

canvas) {
      var x = this.x + Math.sin(this.i) * this.amplitude;

canvas.ctx.beginPath();
      canvas.ctx.fillStyle = this.color;
      canvas.ctx.shadowColor = this.color;
      canvas.ctx.shadowBlur = 5;
      canvas.ctx.arc(x, this.y, this.size, 0, 2 * Math.PI);
      canvas.ctx.fill();
      canvas.ctx.closePath();
    } }]);return Line;}();var

Canvas = function () {
  function Canvas(ctx, w, h) {_classCallCheck(this, Canvas);
    this.ctx = ctx;
    this.width = w;
    this.height = h;
    this.scale = 1.0;
    this.lines = [];
  }_createClass(Canvas, [{ key: 'pushParticle', value: function pushParticle()

{
      var x = Math.random() * this.width;
      var y = this.height + Math.random() * 250;
      var size = 1 + Math.random();

var g = Math.floor(150 + Math.random() * 50);
      var b = Math.floor(150 + Math.random() * 50);
      var color = 'rgba(120,' + g + ',' + b + ',0.7)';

var speed = 2 + Math.random() * 1.5;
      var seed = Math.random() / 20;
      var amp = Math.random() * 15;

this.lines.push(new Line(x, y, size, color, speed, seed, amp));
    } }, { key: 'start', value: function start()

{
      for (var i = 0; i < 100; i++) {
        this.pushParticle();
      }
    } }, { key: 'update', value: function update()

{
      for (var i = 0; i < this.lines.length; i++) {
        var line = this.lines[i];

line.update();
      }

this.lines = this.lines.filter(function (line) {
        return line.y > -2;
      });

var toAdd = 100 - this.lines.length;

if (toAdd === 0) {return;}

for (var _i = 0; _i < toAdd; _i++) {
        this.pushParticle();
      }
    } }, { key: 'draw', value: function draw()

{
      this.ctx.shadowColor = '#000';
      this.ctx.shadowBlur = 0;
      this.ctx.globalCompositeOperation = 'source-over';
      this.ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
      this.ctx.fillRect(0, 0, this.width, this.height);
      this.ctx.globalCompositeOperation = 'lighter';

for (var i = 0; i < this.lines.length; i++) {
        var line = this.lines[i];

line.draw(this);
      }
    } }]);return Canvas;}();

(function (_) {
  var canvasElement = document.getElementById('canvas'),
  ctx = canvasElement.getContext('2d'),
  canvas = new Canvas(ctx);

var w = canvasElement.width = window.innerWidth,
  h = canvasElement.height = window.innerHeight,
  density = 1;

function setup() {
    window.addEventListener('resize', resize);

density = window.devicePixelRatio != undefined ? window.devicePixelRatio : 1.0;

canvasElement.width = w * density;
    canvasElement.height = h * density;

canvas.width = w;
    canvas.height = h;
    canvas.scale = density;

ctx.scale(density, density);

canvas.start();

draw();
  }

function draw() {
    canvas.update();
    canvas.draw();

window.requestAnimationFrame(draw);
  }

function resize() {
    w = canvasElement.width = window.innerWidth;
    h = canvasElement.height = window.innerHeight;

canvasElement.width = w * density;
    canvasElement.height = h * density;

canvas.width = w;
    canvas.height = h;

ctx.scale(density, density);
  }

setup();
})();

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