HTML5简单进度条插件
程序员文章站
2022-03-17 13:07:08
今天学习了HTML5画线条,于是有了做一个简单进度条的插件的想法
先来一个实例
下面是html代码
然后js配置参数
var setting =...
今天学习了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(); } }
就这样,一个自定义小插件就完成了。