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、查看效果。