HTML5简单进度条插件

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

先来一个实例

下面是html代码

    <div>
        <canvas id="canvas"></canvas>
    </div>

然后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();
    }
}

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

版权声明：本文为博主原创文章，未经博主允许不得转载。