前几天做了一个进度条的插件。今天我用HTML5的arc做一个简单的进度环的插件。
代码演示
事实上非常easy的。相同，我们先用一个实例：
配置js代码
var setting = {
id: "canvas",//画布id 不可省略
raduis:"30",//进度环半径
x: 90,//进度环圆心x坐标
y: 90,//进度环圆心y坐标
width: 10,//进度环宽度
time: 100,//进度刷新时间间隔 可省略 默觉得1000毫秒
foregroundColor: "black",
backgroundColor: "blue",
runFunction: function () {
return 2;
},//每次变化的速率 度数
endFunction: function () {//结束时调用的函数
//alert("end");
},
startFunction: function () {//结束时调用的函数
//alert("start");
},
showText: true
}
初始化
initProgressRing(setting);html代码
<div class="context">
<canvas id="canvas"></canvas>
</div>这样就完毕了一个简单的进度环。当然。得引入initProgressRing.js
script type="text/javascript" src="initProgressRing.js"></script>以下我们看initProgressRing怎么实现的呢？
事实上非常easy。不说多了。直接上代码
function initProgressRing(setting) {
var initProgressRing = {};
initProgressRing.all = 0;
initProgressRing.startY = Math.PI;
initProgressRing.endY1 = initProgressRing.startY + 2 * Math.PI;
initProgressRing.endY2 = initProgressRing.startY - 2 * Math.PI;
//调用開始函数
if (setting.startFunction) {
setting.startFunction();
}
//初始化默认值函数
initProgressRing.initSet = function (set) {
if (!set.counterclockwise) {
set.counterclockwise = false;
}
if (!set.time) {
set.time = 1000;
}
if (!set.width) {
set.width = 10;
}
if (!set.backgroundColor) {
set.color = "red";
}
if (!set.foregroundColor) {
set.color = "blue";
}
if (!set.radius) {
set.radius = 10;
}
return set;
}
//初始化默认值
setting = initProgressRing.initSet(setting);
//刷新函数
initProgressRing.remainTime = function () {
initProgressRing.all += setting.runFunction();
initProgressRing.startY += 2 * Math.PI / 360 * setting.runFunction();
initProgressRing.text = Math.round((initProgressRing.all / 360 * 10000) / 100) + "%";
//推断结束
if (initProgressRing.startY > initProgressRing.endY1 || initProgressRing.startY < initProgressRing.endY2) {
initProgressRing.text = "100%";
clearInterval(initProgressRing.run);
if (setting.endFunction) {
setting.endFunction();//调用结束函数
}
}
initProgressRing.draw(setting.x, setting.y, setting.raduis, setting.width, setting.backgroundColor, setting.foregroundColor, setting.counterclockwise);
}
//初始化画布，调用刷新函数
if (setting.id) {
initProgressRing.canvas = document.getElementById(setting.id);
console.log(setting.id);
initProgressRing.context = initProgressRing.canvas.getContext("2d");
initProgressRing.run = setInterval(initProgressRing.remainTime, setting.time);//1000为1秒钟
} else {
alert("初始化错误，没有id");
}
//画进度条
initProgressRing.draw = function draw(x, y, raduis, width, backgroundColor, foregroundColor, counterclockwise) {
//清除内容
initProgressRing.context.clearRect(0, 0, canvas.width, canvas.height);
initProgressRing.context.lineWidth = width;
initProgressRing.context.beginPath();
initProgressRing.context.strokeStyle = backgroundColor;
initProgressRing.context.arc(x, y, raduis, 0, 2 * Math.PI, false);
initProgressRing.context.stroke();
initProgressRing.context.beginPath();
initProgressRing.context.strokeStyle = foregroundColor;
initProgressRing.context.arc(x, y, raduis, Math.PI, initProgressRing.startY, counterclockwise);
initProgressRing.context.stroke();
if (setting.showText) {
console.log(initProgressRing.text);
initProgressRing.context.fillText(initProgressRing.text, x - 7, y+5, 40);
}
}
}