今天学习了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
<script type=text/javascript src=progressBar.js></script>
就这样 一个简单的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();
}
}
就这样，一个自定义小插件就完成了。
如对本文有疑问， 点击进行留言回复！！
web前端基础之HTML5语义化新标签学习笔记（8）学会用语义化标签
网友评论