HTML5如何实现进度条特效

这篇文章将为大家详细讲解有关HTML5如何实现进度条特效，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

    <！DOCTYPEhtml>     varlightLoader=函数（c，cw，ch）{var_this=this;this.c=c;this.ctx=c.getContext（'2d'）;this.cw=cw;this.ch=ch;this.loaded=0;this.loaderSpeed=0.6;this.loaderHeight=10;this.loaderWidth=310;this.loader={x：（this.cw/2）-（this.loaderWidth/2），y：（this.ch/2）-（this.loaderHeight/2）};this.particles=[];this.particleLift=180;this.hueStart=0this.hueEnd=120;this.hue=0;this.gravity=.15;this.particleRate=4;/*========================================================*//*初始化     /*========================================================*/this.init=function（）{this.loop（）;};/*========================================================*//*实用程序功能/*====================================/=。============*/this.rand=function（rMi，rMa）{return〜〜（（（Math.random（）*（rMa-rMi+1））+rMi）;};this.hitTest=函数（x1，y1，w1，h2，x2，y2，w2，h3）{return！（x1+w1_this.ch）{_this.particles.splice（i，1）;}};this.Particle.prototype.render=function（）{_this.ctx.fillStyle='hsla（'+this.hue+'，100％，'+_this.rand（50，70）+'％，'+_this。rand（20，100）/100+'）';_this.ctx.fillRect（this.x，this.y，this.width，this.height）;};this.createParticles=function（）{vari=this.particleRate;而（i--）{this.particles.push（newthis.Particle（））;};};this.updateParticles=function（）{     vari=this.particles.length;而（i--）{varp=this.particles[i];p.update（i）;};};this.renderParticles=function（）{vari=this.particles.length;而（i--）{varp=this.particles[i];p.render（）;};};
/*==========================================================*//*透明画布/*=======================================================*/this.clearCanvas=function（）{this.ctx.globalCompositeOperation='source-过度';this.ctx.clearRect（0，0，this.cw，this.ch）;this.ctx.globalCompositeOperation='更轻';};/*========================================================*/     /*动画循环/*========================================================*//this.loop=function（）{varloopIt=function（）{requestAnimationFrame（loopIt，_this.c）;_this.clearCanvas（）;_this.createParticles（）;_this.updateLoader（）;_this.updateParticles（）;_this.renderLoader（）;_this.renderParticles（）;};loopIt（）;};};/*========================================================*//*检查画布支持/*=================================/=varisCanvasSupported=function（）{varelem=document.createElement（'canvas'）;======================*/     return!!（elem.getContext&&elem.getContext（'2d'））;};/*========================================================*//*设置requestAnimationFrame/*=================================*/varsetupRAF=function（）{varlastTime=0;======================*/varvendor=['ms'，'moz'，'webkit'，'o'];for（varx=0;xHTML5进度条请使用支持HTML5的浏览器查看本页