html5 canvas粒子动画进度条加载特效

1、新建html文档。

2、书写hmtl代码。

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

<div>html5 canvas粒子动画进度条加载特效。只适用于高版本浏览器，ie无效</div>

3、书写css代码。

<style>

body, html {

  margin: 0px;

  padding: 0px;

  overflow: hidden;

}

</style>

4、书写并添加js代码。

<script src="js/jquery.min.js"></script>

<script>

$(function() {

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

</script>

5、代码整体结构。

6、查看效果。