canvas繪製百分比圓環進度條

　　開發項目，PM會跟蹤項目進度；完成某個事情，也能夠設置一個完成的進度。

　　這裏用canvas繪製一個簡單百分比圓環進度條。

　　看下效果：

　　1. 動畫方式

 

　　2. 靜默方式

 

 　

　　 貼上代碼，僅供參考　

/**
 * LBS drawRing 
 * Date: 2015-04-24
 * ==================================
 * opts.parent 插入到哪裏 一個JS元素對象
 * opts.width 寬度 = 2* (半徑+弧寬)  
 * opts.radius 半徑
 * opts.arc 弧寬
 * opts.perent 百分比 
 * opts.color 弧渲染顏色 [底色,進度色]
 * opts.textColor 文字渲染顏色
 * opts.textSize 文字渲染大小
 * opts.animated 是否以動畫的方式繪製 默認false
 * opts.after 繪製完成時執行函數
 * ==================================
 **/

function drawRing(opts) {
    var _opts = {
        parent: document.body,
        width: 100,
        radius: 45,
        arc: 5,
        perent: 100,
        color: ['#ccc', '#042b61'],
        textColor: '#000',
        textSize: '14px',
        animated: false,
        after: function() {}
    }, k;
    for (k in opts) _opts[k] = opts[k];
    
    var parent = _opts.parent,
        width = _opts.width,
        radius = _opts.radius,
        arc = _opts.arc,
        perent = parseFloat(_opts.perent),
        color = _opts.color,
        textSize = _opts.textSize,
        textColor = _opts.textColor,
        c = document.createElement('canvas'),
        ctx = null,
        x = 0,
        animated = _opts.animated,
        after = _opts.after;

    parent.appendChild(c);
    ctx = c.getContext("2d");
    ctx.canvas.width = width;
    ctx.canvas.height = width;

    function clearFill() {
        ctx.clearRect(0, 0, width, width);
    }

    function fillBG() {
        ctx.beginPath();
        ctx.lineWidth = arc;
        ctx.strokeStyle = color[0];
        ctx.arc(width / 2, width / 2, radius, 0, 2 * Math.PI);
        ctx.stroke();
    }

    function fillArc(x) {
        ctx.beginPath();
        ctx.lineWidth = arc;
        ctx.strokeStyle = color[1];
        ctx.arc(width / 2, width / 2, radius, -90 * Math.PI / 180, (x * 3.6 - 90) * Math.PI / 180);
        ctx.stroke();
    }

    function fillText(x) {
        ctx.font = textSize + ' Arial';
        ctx.fillStyle = textColor;
        ctx.textBaseline = "middle";
        ctx.textAlign = 'center';
        ctx.fillText(x.toFixed(1) + '%', width / 2, width / 2);
    }

    function fill(x) {
        fillBG();
        fillArc(x);
        fillText(x);
    }

    if (!animated) return fill(perent);

    fill(x);
    !function animate() {
        if (++x > perent) return after && after();
        setTimeout(animate, 10);
        clearFill();
        fill(x);
    }();
}

View Code

 　　很簡單的一段代碼

　　先建立一個canvas畫布對象，設置寬高。　

var c = document.createElement('canvas');
document.body.appendChild(c);
var ctx = c.getContext("2d");
ctx.canvas.width = width;
ctx.canvas.height = width;

　　圓環由兩部分組成，底部灰色完整的環，根據百分比變更的環。

　　先繪製底部完整的環。

//起始一條路徑
ctx.beginPath();
//設置當前線條的寬度
ctx.lineWidth = 10; //10px
//設置筆觸的顏色
ctx.strokeStyle = '#ccc';
//arc() 方法建立弧/曲線（用於建立圓或部分圓） 
ctx.arc(100, 100, 90, 0, 2 * Math.PI);
//繪製已定義的路徑
ctx.stroke();

　　重點理解：canvas arc() 方法 ：HTML5 canvas arc() 方法

　　arc方法默認是從3點鐘方向(90度)開始繪製的，通常要把這個開始處設置日常習慣的0點方向。

　　也須要理解弧度和角度的互相轉換。

degrees = radians * 180/Math.PI 
角度等於弧度乘於180再除於PI

radians = degrees * Math.PI/180
弧度等於角度度乘於PI再除於180

 　　繪製根據百分比變更的環。

ctx.beginPath();
ctx.lineWidth = 10;
ctx.strokeStyle = '#f30';
//設置開始處爲0點鐘方向(-90 * Math.PI / 180)
//x爲百分比值(0-100)
ctx.arc(100, 100, 90, -90 * Math.PI / 180, (x * 3.6 - 90) * Math.PI / 180);  
ctx.stroke();

　　繪製中間的文字

ctx.font = '40px Arial';
ctx.fillStyle = '#f30';
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
ctx.fillText('50.0%', 100, 100);

　　到此一個靜止的百分比圓環進度條就繪製完成了。

 　  不知足於繪製靜態的，動態的更生動有趣一些。

　　canvas動態繪製就是在一段時間內：繪製一個區域的內容，清除這個區域內容，再從新繪製內容，重複這個過程(繪製-清除-繪製)。

　　有興趣能夠去研究一下，上面的代碼也能夠參考，若是結合動畫函數和運動公式能夠繪製更生動的百分比圓環進度條哦。

　　--------------------------------------------

　　參考: 

　　HTML 5 Canvas 參考手冊