首页 > 代码库 > canvas实现进度条！
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>
canvas实现进度条！
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。