HTML5 Canvas繪制環形進度條

最近比較迷戀canvas，加之做了一個個人網站，有用到環形進度條，記錄下來。

canvas中沒有直接繪制圓的方法，但有一個繪制弧線的context.arc方法，
下面講下用該方法如何繪制出圖片效果。

arc()方法介紹

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

參數說明：

x: 圓的中心的 x 坐標 y: 圓的中心的 y 坐標 r: 圓的半徑 sAngle: 起始角，以弧度計。（弧的圓形的三點鍾位置是 0 度） eAngle: 結束角，以弧度計 counterclockwise: 可選。規定應該逆時針還是順時針繪圖。False = 順時針，true = 逆時針。默認false

看到這里，大家就會明白怎么畫圓了把，只要讓起始角和結束角度為一個圓周就可以了。

下面開始畫圖咯！

環形進度條

環形進度條主要兩部分組成，一是灰色圓，另一是藍色弧度。也就是說灰色圓圈和藍色弧同圓心同半徑。知道了原理大家是不是覺得瞬間簡單好多。。。

第一步：畫灰色圓

function Circle() {    this.radius = 100;    // 圓環半徑    this.lineWidth = 25;  // 圓環邊的寬度    this.strokeStyle = '#ccc'; //邊的顏色    this.fillStyle = 'blue';  //填充色    this.lineCap = 'round';}Circle.prototype.draw = function(ctx) {    ctx.beginPath();    ctx.arc(250, 250, this.radius, 0, Math.PI*2, true);  // 坐標為250的圓，這里起始角度是0，結束角度是Math.PI*2    ctx.lineWidth = this.lineWidth;    ctx.strokeStyle = this.strokeStyle;    ctx.stroke();  // 這里用stroke畫一個空心圓，想填充顏色的童鞋可以用fill方法};

當然這樣是畫不出來的，我們繼續往下看。

第二步：畫進度條（藍色部分）

這部分說白了就是和灰色圓圈同圓心同半徑的一條藍弧。

function Ring(startAngle, percent) {    Circle.call(this);    this.startAngle = startAngle || 3*Math.PI/2; //弧起始角度    this.percent = percent;  //弧占的比例}Ring.prototype = Object.create(Circle.prototype);Ring.prototype.drawRing = function(ctx) {     this.draw(ctx);  // 調用Circle的draw方法畫圈圈     // angle     ctx.beginPath();     var anglePerSec = 2 * Math.PI / (100 / this.percent); // 藍色的弧度     ctx.arc(250, 250, this.radius, this.startAngle, this.startAngle + , false); //這里的圓心坐標要和cirle的保持一致     ctx.strokeStyle = that.fillStyle;     ctx.lineCap = that.lineCap;     ctx.stroke();     ctx.closePath();}

canvas是不是還沒定義吶？別急，咱慢慢來～

獲取canvas的上下文context：

var canvas = document.getElementById('canvas');var ctx =  canvas.getContext('2d');

接下來就調用下我們的drawRing吧

var ring = new Ring(2*Math.PI/3, 50);  // 從2*Math.PI/3弧度開始，進度為50%的環ring.drawRing(ctx);

到這里，一個上圖所示的進度環就ok了～
先別鼓掌太早，既然是進度條，是不是要動起來的更美呢！

動之前，我們先搞明白一個概念，我們知道，坐標分為四個象限，如果圓心是原點，那么arc方法的弧度是怎么開始的呢？先看圖！
（偶從w3school挖的圖）

怎么樣，明白了嗎？是不是覺得哪里不對勁呢～上學時學的第一象限0～π/2(右上角)，怎么看起來是反的呢，這就是差異啊！！細心的童鞋可能會注意到arc方法不是還有最后一個參數嘛，還是可選的，當counterclockwise參數為true時，你們猜這逆天的坐標軸會變成我們熟悉的嗎？哎～摸摸頭。。。人家這參數只是讓弧度逆時針轉了而已，坐標軸弧度還是不變滴～

好了，說了這么多，是不是該動起來了呢，直接上代碼。<喎�"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;"> Ring.prototype.drawRing = function(ctx) { var count = 0, that = this, times = 10, // 分十次繪制藍弧 startAngle = this.startAngle, endAngle = startAngle; // draw background cirle this.draw(ctx); var handle = setInterval(function() { if (count == times) { clearInterval(handle); } // angle ctx.beginPath(); var anglePerSec = 2 * Math.PI * (that.percent / 100) / times; // 每個間隔滑動的弧度 ctx.arc(250, 250, that.radius, startAngle, endAngle, false); //這里的圓心坐標要和cirle的保持一致 ctx.strokeStyle = that.fillStyle; ctx.lineCap = that.lineCap; ctx.stroke(); ctx.closePath(); startAngle += anglePerSec - 0.0028; // 消除每次繪環間的計算誤差，防止出現空隙 endAngle = startAngle + anglePerSec; count++; }, 60); // 這里定義每60ms繪制一次 }

是的，只要把Ring.prototype.drawRing方法替換為上面的就行。