canvs 实现进度条效果（烟火效果）

来源：互联网发布：飞龙淘宝小号浮云网编辑：程序博客网时间：2024/06/07 06:22

新手试一下canvas：先贴出效果（自己运行试一下）

贴出源码：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{padding:0px;margin:0px;overflow: hidden;}
#cas{display: block;border:1px solid;margin:auto;}
</style>
<title>progressBar</title>
</head>
<body>
<div class="game">
<canvas id='cas' width="700" height="750" >您的浏览器不支持canvas，请更新浏览器</canvas>
</div>
<script>
var canvas = document.getElementById("cas");
var ctx = canvas.getContext("2d");
var progress = 0;
var flag = true;
var booms = [];

Array.prototype.foreach = function(callback){
for(var i=0;i<this.length;i++){
if(this[i]!==null) callback.apply(this[i] , [i])
}
}

window.RAF = (function(){
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {window.setTimeout(callback, 1000 / 60); };
})();

function getRandom(a , b){
return Math.random()*(b-a)+a;
}

var Frag = function(centerX , centerY , radius , color ,tx , ty){ //烟火碎屑对象
this.tx = tx;
this.ty = ty;
this.x = centerX;
this.y = centerY;
this.dead = false;
this.centerX = centerX;
this.centerY = centerY;
this.radius = radius;
this.color = color;
}

Frag.prototype = {
paint:function(){
ctx.save();
ctx.beginPath();
ctx.arc(this.x , this.y , this.radius , 0 , 2*Math.PI);
ctx.fillStyle = "rgba("+this.color.a+","+this.color.b+","+this.color.c+",1)";
ctx.fill()
ctx.restore();
},
moveTo:function(index){
this.ty = this.ty+30;
var dx = this.tx - this.x , dy = this.ty - this.y;
this.x = Math.abs(dx)<0.1 ? this.tx : (this.x+dx*0.1);
this.y = Math.abs(dy)<0.1 ? this.ty : (this.y+dy*0.1);
if(dx===0 && Math.abs(dy)<=80){
this.dead = true;
}
this.paint();
}
}

var stage = {

update:function(){

if(progress<=600){
ctx.save();
ctx.fillStyle = "rgba(0,5,24,0.1)";
ctx.fillRect(0,0,canvas.width,canvas.height);//实现烟火尾巴效果
ctx.restore();
ctx.save();
ctx.fillStyle="blue";
ctx.fillRect(50,300,600,50);
ctx.restore();

ctx.save();
var gradient=ctx.createLinearGradient(50,300,600,50);
gradient.addColorStop("0","grey");
gradient.addColorStop("0.5","black");
gradient.addColorStop("1.0","red");//进度条渐变
ctx.fillStyle=gradient;
ctx.fillRect(50,300,progress,50);
progress += 2;
var percentage= parseInt(progress/600*100)+"%";
ctx.font="30px Verdana";
ctx.fillText(percentage,200,200);
ctx.restore();

booms = [];
for(var i = 0;i<5;i++){
var color = {
a:parseInt(getRandom(128,255)),
b:parseInt(getRandom(128,255)),
c:parseInt(getRandom(128,255))
} //end color
var fanwei = parseInt(getRandom(300, 400));
var a = getRandom(-Math.PI, -Math.PI*3/4);
var x = getRandom(0, fanwei) * Math.cos(a) + progress+50;
var y = getRandom(0, fanwei) * Math.sin(a) + 300;

var frag = new Frag( progress+50 , 300 , 2 , color , x , y );
booms.push(frag);
}//end for

booms.foreach(function(){
this.moveTo();
})
}else{
flag =false;
}

},

loop:function(){
var _this = this;
if(flag){
this.update();
}
RAF(function(){
_this.loop();
});
},

start:function(){
this.loop();
}
}
stage.start();
</script>
</body>
</html>

0 0