本来想做成一个插件的, 奈何本人写的插件比较少, 写起来还是比较吃力,
所以...
先暂时放一个效果, 插件做出来再放吧, 这只是一个简单的效果
--Kay - 永不止步
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>canvas 进度条粒子效果 </title>
- <style>
- *{margin: 0;padding: 0;}
- html,body{height: 100%;}
- body{background:#131313;padding-top:1px;}
- #box{margin-top: 200px;padding: 1px 0;position: relative;text-align: center;}
- #box1{margin-top: 200px;padding: 1px 0;position: relative;text-align: center;}
- #progress{width:80%;margin: 50px auto;height: 10px;background: #808080;border-radius: 5px;}
- #progress-bar{width:50%;height: 10px;background: #fff;border-radius: 5px;box-shadow: 0 0 20px red;}
- #canvas{position: absolute;top:0;left: 0;z-index: -1;}
- </style>
- <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
- </head>
- <body>
- <div id="box">
- <div id="progress">
- <div id="progress-bar"></div>
- <canvas id="canvas"></canvas>
- </div>
- </div>
- <script>
- var boxEle;
- var BOX_WIDTH,BOX_HEIGHT,PROGRESS_WIDTH,PROGRESS_HEIGHT;
- var canvas,context;
- var progressBarWidth;
- var progressBar;
- var points = [];
- var goal;
- window.onload = function(){
- boxEle = document.getElementById('box')
- BOX_WIDTH = boxEle.offsetWidth;
- BOX_HEIGHT = boxEle.offsetHeight;
- var progressEle =document.getElementById('progress');
- PROGRESS_WIDTH = progressEle.offsetWidth;
- PROGRESS_HEIGHT = progressEle.offsetHeight;
- progressBar = document.getElementById('progress-bar');
- progressBarWidth = progressBar.offsetWidth;
- goal = progressBarWidth;
- canvas = document.getElementById('canvas');
- canvas.width = BOX_WIDTH;
- canvas.height = BOX_HEIGHT;
- context = canvas.getContext('2d');
- update();
- }
- function update(){
- addCanvas();
- render();
- progressBarWidth += 5;
- if(progressBarWidth>= PROGRESS_WIDTH){
- progressBarWidth = 0;
- }
- setTimeout(function(){
- update();
- },16)
- progressBar.style.width = progressBarWidth+"px";
- }
- function addCanvas(){
- for(var i = 0 ; i <5 ; i++){
- var aPoint = {
- x:progressBarWidth + (BOX_WIDTH-PROGRESS_WIDTH)/2,
- y:(BOX_HEIGHT - PROGRESS_HEIGHT)/2,
- r:Math.round(Math.random()*3),
- vx:-Math.round(Math.random()*5),
- vy:-Math.round(Math.random()*5),
- ay:3,
- alpha:1
- }
- points.push(aPoint);
- }
- }
- function render(){
- context.clearRect(0,0,BOX_WIDTH,BOX_HEIGHT);
- for(var i = 0 ; i < points.length ; i++){
- var point = points[i];
- context.beginPath();
- var bg = context.createRadialGradient(point.x, point.y, 0 , point.x, point.y, point.r);
- bg.addColorStop(0,'rgba(255,0,255,'+point.alpha+')');
- bg.addColorStop(1,'rgba(255,0,255,0)');
- context.fillStyle = bg;
- context.arc(point.x, point.y, point.r, 0, Math.PI*2, true);
- context.fill();
- context.beginPath();
- point.alpha -= 0.02;
- if(point.alpha<0){
- points.splice(i,1);
- }else{
- point.x += point.vx;
- point.y += point.vy+point.ay;
- }
- }
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/28490/f48465df903497529ab9d5fa94e66825.html