js实现带粒子进度条效果代码-html代码-BFW代码库

js实现带粒子进度条效果代码

代码语言：html

所属分类：进度条

代码描述：js实现带粒子进度条效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

<style>
body, html {
  margin: 0px;
  padding: 0px;
  background: #000000;
}
</style>

</head>
<body>

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

<script>
$(function() {

  //Indention is a bit f*d up

  //Set animation frame
  window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;


  var canvas = $('#canvas')[0],
      ctx = canvas.getContext('2d'),
      canvasW = $(document).width(),
      canvasH = $(document).height();

  ctx.fillStyle = 'black';

  canvas.width = canvasW;
  canvas.height = canvasH;
  
  var mouse = {
    x: canvasW/2,
    y: canvasH/2,
    dx: 0,
    dy: 0
  };
  
  var emitter = {
    h: 50,
    x: canvasW/2-250,
    y: canvasH/2,
    vx: 5,
    vy: 5,
    v: 0.05,
    dx: 0,
    dy: 0
  };
  
  var stops = [50, 150, 160, 300, 500],
      stopIndex = 0,
      delay = 0,
      prog = 0;
  
  var circle = {
    radius: 125,
    angle: 0
  };

  var particles = new Array();
  
  var rate = 2,
      time = 0,
      frameIndex = rate;
  
  var simplex = new SimplexNoise(),
      simplexVal = 0,
      simplexStart = 20;

  //Start loop
  draw();

  //Draw
  function draw() {
    
    ctx.globalCompositeOperation = 'source-over';
    ctx.fillStyle = 'rgba(0,0,0,0.5)';
    ctx.fillRect(0, 0, canvasW, canvasH);
    ctx.globalCompositeOperation = 'lighter';
    
    //Draw loading
    ctx.fillStyle = '#000';
    ctx.fillRect(canvasW/2-250, emitter.y-emitter.h/2, 500, emitter.h);
    ctx.strokeStyle = 'rgba(0,255,0,0.5)';
    ctx.strokeRect(canvasW/2-250, emitter.y-emitter.h/2, 500, emitter.h);
    ctx.font = '20pt Arial';
    ctx.fillStyle = 'rgba(0,255,0,0.5)';
    ctx.fillText(Math.floor(prog/5)+'%', canvasW/2-20, canvasH/2+10);
    
    //Move emitter
    //console.log(stops[stopIndex]+' '+prog+' '+delay);
    if(stops[stopIndex] == prog) {
      stopIndex ++;
      delay = 50;
    } else {
      if(delay == 0 && prog < stops[stopIndex]) {
        emitter.dx = -1;
        emitter.x += 2;
        prog += 2;
      } else {
        emitter.dx = 0;
        delay --;
      }
    }
    
    //Draw emitter
    ctx.fillStyle = '#0f0';
    ctx.fillRect(emitter.x, emitter.y-emitter.h/2, 1, emitter.h);

    //Draw particles
    var i = 0;
    for(i in particles) {
      var p = particles[i];
      
      //Check if die
      if(time > p.die) {
        p.o -= 0.01;
        if(p.o < 0) {
          particles.splice(i, 1);
        }
      }
      
      //Add v
      p.x += p.vx;
      p.y += p.vy;
      
      //Add source move
      p.x += p.sourcedx / 10;
      p.y += p.sourcedy / 10;
      
      //Simplex noise
      if(p.simplexIndex > simplexStart) {
        p.simplexVal = simplex.noise3D(p.x/100, p.y/100, time/100);
      }
      
      p.simplexIndex ++;
      p.x += p.simplexVal;
      p.y += p.simplexVal;
      
      //If (almost) outside canvas
      if(p.x < 0+20 || p.x > canvasW-20) {
        p.vx *= -1.015;
      }
      if(p.y < 0+20 || p.y > canvasH-20) {
        p.vy *= -1.015;
      }
      
      ctx.beginPath();
      ctx.fillStyle = 'rgba(0,.........完整代码请登录后点击上方下载按钮下载查看