HTML5进度条特效

2020-04-22 06:44:30易采站长站整理

};
/*========================================================*/
/* Particles
/*========================================================*/
this.Particle = function () {
this.x = _this.loader.x + ((_this.loaded / 100) * _this.loaderWidth) – _this.rand(0, 1);
this.y = _this.ch / 2 + _this.rand(0, _this.loaderHeight) – _this.loaderHeight / 2;
this.vx = (_this.rand(0, 4) – 2) / 100;
this.vy = (_this.rand(0, _this.particleLift) – _this.particleLift * 2) / 100;
this.width = _this.rand(1, 4) / 2;
this.height = _this.rand(1, 4) / 2;
this.hue = _this.hue;
};
this.Particle.prototype.update = function (i) {
this.vx += (_this.rand(0, 6) – 3) / 100;
this.vy += _this.gravity;
this.x += this.vx;
this.y += this.vy;
if (this.y > _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 () {
var i = this.particleRate;
while (i–) {
this.particles.push(new this.Particle());
};
};
this.updateParticles = function () {
var i = this.particles.length;
while (i–) {
var p = this.particles[i];
p.update(i);
};
};
this.renderParticles = function () {
var i = this.particles.length;
while (i–) {
var p = this.particles[i];
p.render();
};
};</p>
<p>/*========================================================*/
/* Clear Canvas
/*========================================================*/
this.clearCanvas = function () {
this.ctx.globalCompositeOperation = ‘source-over’;
this.ctx.clearRect(0, 0, this.cw, this.ch);
this.ctx.globalCompositeOperation = ‘lighter’;
};
/*========================================================*/
/* Animation Loop
/*========================================================*/
this.loop = function () {
var loopIt = function () {
requestAnimationFrame(loopIt, _this.c);
_this.clearCanvas();
_this.createParticles();
_this.updateLoader();
_this.updateParticles();
_this.renderLoader();
_this.renderParticles();
};
loopIt();
};
};
/*========================================================*/
/* Check Canvas Support
/*========================================================*/
var isCanvasSupported = function () {
var elem = document.createElement(‘canvas’);
return !!(elem.getContext && elem.getContext(‘2d’));
};
/*========================================================*/
/* Setup requestAnimationFrame
/*========================================================*/