今天學習了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();
    }
}

就這樣，一個自定義小外掛就完成了。
線上演示