canvas自定义进度条

最新推荐文章于 2024-05-11 11:18:25 发布

squabLi

最新推荐文章于 2024-05-11 11:18:25 发布

阅读量293

点赞数

分类专栏： js 进度条文章标签： html js

本文链接：https://blog.csdn.net/IT_arookie/article/details/105676941

版权

js 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

进度条

1 篇文章 0 订阅

订阅专栏

先上结果，后附代码
aaaa
在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>show</title>
</head>
<body>
    <div id="show">
        <canvas id="showData" style="height: 20px;width: 300px;"></canvas>
    </div>
</body>
<script src="index.js"></script>
</html>

index.js

var loadeds = 0;
/*========================================================*/
/* Light Loader
/*========================================================*/
var lightLoader = function (c, cw, ch) {

	var _this = this;
	this.c = c;
	this.ctx = c.getContext('2d');
	this.cw = 300;				//父类宽
	this.ch = 150;				//父类高
	this.loaded = startScores;
	this.loaderSpeed = .6;		//加载速度
	this.loaderHeight = 50;		//进度条高度
	this.loaderWidth = 120;		//默认进度条长度
	this.loader = {
		x: (this.cw / 2) - (this.loaderWidth / 2),
		y: (this.ch / 2) - (this.loaderHeight / 2)
	};
	this.particles = [];
	this.particleLift = 180;		//光粒子上扬的高度
	this.hueStart = 0;				//颜色渐变的初始颜色
	this.hueEnd = 120;				//渐变的颜色选择
	this.hue = 0;
	this.gravity = .15;				//光粒子上扬的角度
	this.particleRate = 2;			//光粒子的数量

	/*========================================================*/
	/* Initialize
    /*========================================================*/
	this.init = function () {
		this.loop();
	};

	/*========================================================*/
	/* Utility Functions
    /*========================================================*/
	this.rand = function (rMi, rMa) {
		return ~~((Math.random() * (rMa - rMi + 1)) + rMi);
	};
	this.hitTest = function (x1, y1, w1, h1, x2, y2, w2, h2) {
		return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);
	};

	/*========================================================*/
	/* Update Loader		是否循环加载 ,
    /*========================================================*/
	this.updateLoader = function () {
		if (this.loaded < scores) {
			this.loaded += this.loaderSpeed;
			loadeds = this.loaded;
		} else {
			if (flog) {
				this.loaded = startScores;
				loadeds = startScores;
			} else {
				if (this.loaded >= 99) {
					this.particleRate = 0;
				}
			}
		}
	};

	/*========================================================*/
	/* Render Loader
    /*========================================================*/
	this.renderLoader = function () {
		this.ctx.fillStyle = '#000';			//进度条的底层颜色
		this.ctx.fillRect(this.loader.x, this.loader.y, this.loaderWidth, this.loaderHeight);

		this.hue = this.hueStart + (this.loaded / 100) * (this.hueEnd - this.hueStart);

		var newWidth = (this.loaded / 100) * this.loaderWidth;
		this.ctx.fillStyle = 'hsla(' + this.hue + ', 100%, 40%, 1)';
		this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight);

		this.ctx.fillStyle = '#222';
		this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight / 2);
	};

	/*========================================================*/
	/* 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();
		}
	};


	/*========================================================*/
	/* 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
/*========================================================*/
var setupRAF = function () {
	var lastTime = 0;
	var vendors = ['ms', 'moz', 'webkit', 'o'];
	for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
		window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
		window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
	}
	if (!window.requestAnimationFrame) {
		window.requestAnimationFrame = function (callback, element) {
			var currTime = new Date().getTime();
			var timeToCall = Math.max(0, 16 - (currTime - lastTime));
			var id = window.setTimeout(function () {
				callback(currTime + timeToCall);
			}, timeToCall);
			lastTime = currTime + timeToCall;
			return id;
		};
	}
	if (!window.cancelAnimationFrame) {
		window.cancelAnimationFrame = function (id) {
			clearTimeout(id);
		};
	}
};

/*========================================================*/
/* Define Canvas and Initialize
/*========================================================*/
var scores = 100;
var startScores = 0;
var flog = false;

function showProgressBar(id, num1, num2, boo) {
	scores = num2;
	if (scores > 100) {
		scores = 100;
	}
	startScores = num1;
	flog = boo;
	var c = document.getElementById(id);
	// var cw = c.width;
	var cw = c.offsetWidth;
	// var ch = c.height;
	var ch = c.offsetHeight;
	// document.body.appendChild(c);
	var cl = new lightLoader(c, cw, ch);
	setupRAF();
	cl.init();
}
// 进度条控制方法
showProgressBar("showData",0,100,true);  // id ,开始 分数 ,循环

function getLoaded() {
	return loadeds;
}
function setScores(){
	loadeds = 0;
}

squabLi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas自定义进度条

先上结果，后附代码index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>show</title></head><body> <div id="show"&...
复制链接

扫一扫

专栏目录