html5 简单进度条,HTML5简单进度条插件

今天学习了HTML5画线条，于是有了做一个简单进度条的插件的想法

先来一个实例

下面是html代码

然后js配置参数

var setting = {

id: canvas,//画布id 不可省略

width: 40,//进度条高度 可省略

time: 100,//进度刷新时间间隔 可省略 默认为1000毫秒

color: black,//进度条颜色 可省略 默认为bule

runX2: function (x) {//每次刷新调用的改变X2坐标的函数,可省略 runX1,runY1,runY2一样

x = x + 2;

return x;

},

endFunction: function () {//结束时调用的函数

},

startFunction: function () {//结束时调用的函数

}

}

然后

initProgressBar(setting);

就行了 当然，最开始要引入自定义进度条的js

就这样 一个简单的HTML5 canvas实现的进度条就实现了

我们先来说下API ，API很简单，只有几个参数，一般来说 只需要一个ID和一个变化函数就可以实现一个简单的进度条

id 画布的id

width：进度条的高度，也可以叫宽度 默认10

time：刷新时间，也就是说每隔多久执行一次函数 默认1000毫秒

color：进度条的颜色 默认red

lineCap：样式 和HTML5的lineCap样式一样 默认round

runX2：每次刷新调用的变化函数，每次刷新调用的改变X2坐标的函数,可省略 runX1,runY1,runY2一样 共有两个坐标x1,y1,x2,y2

startFunction：开始之前调用的函数

endFunction：结束之后调用的函数

是不是很简单？那我们现在来看下插件实现的源码，也很简单，不过100行。运用js的setInterval实现定时刷新。

function initProgressBar(setting) {

var initProgressBar = {};

//调用开始函数

if (setting.startFunction) {

setting.startFunction();

}

//初始化默认值函数

initProgressBar.initSet = function (set) {

if (!set.time) {

set.time = 1000;

}

if (!set.width) {

set.width = 10;

}

if (!set.color) {

set.color = red;

}

if (!set.lineCap) {

set.lineCap = round;

}

return set;

}

//初始化默认值

setting = initProgressBar.initSet(setting);

//刷新函数

initProgressBar.remainTime = function () {

if (setting.runX1) {

x1 = setting.runX1(x1);

if (x1 >= endW) {

x1 = endW;

}

}

if (setting.runY1) {

y1 = setting.runY1(y1);

if (y1 >= endH) {

y1 = endH;

}

}

if (setting.runX2) {

x2 = setting.runX2(x2);

if (x2 >= endW) {

x2 = endW;

}

}

if (setting.runY2) {

y2 = setting.runY2(y2);

if (y2 >= endH) {

y2 = endH;

}

}

initProgressBar.draw(x1, y1, x2, y2, setting.width, setting.lineCap, setting.color);

//判断结束

if (y2 >= endH || y1 >= endH || x1 >= endW || x2 >= endW) {

clearInterval(initProgressBar.run);

if (setting.endFunction) {

setting.endFunction();//调用结束函数

}

}

}

//初始化画布，调用刷新函数

if (setting.id) {

initProgressBar.canvas = document.getElementById(setting.id);

console.log(setting.id);

initProgressBar.context = initProgressBar.canvas.getContext(2d);

initProgressBar.run = setInterval(initProgressBar.remainTime, setting.time);//1000为1秒钟

} else {

alert(初始化错误，没有id);

}

var x1 = setting.width / 2;//起始点的坐标x

var y1 = setting.width / 2;//起始点的坐标y

var x2 = setting.width / 2;//结束点的坐标x

var y2 = setting.width / 2;//结束点的坐标y

var endH = initProgressBar.canvas.height - setting.width;

var endW = initProgressBar.canvas.width - setting.width;

//画进度条

initProgressBar.draw = function draw(x1, y1, x2, y2, width, lineCap, color) {

//清除内容

initProgressBar.context.clearRect(0, 0, canvas.width, canvas.height);

initProgressBar.context.beginPath();

initProgressBar.context.strokeStyle = color;

initProgressBar.context.lineCap = lineCap;

initProgressBar.context.moveTo(x1, y1);

initProgressBar.context.lineWidth = width;

initProgressBar.context.lineTo(x2, y2);

initProgressBar.context.stroke();

}

}

就这样，一个自定义小插件就完成了。