canvas中沒有直接繪製圓的方法，但有乙個繪製弧線的context.arc方法，
下面講下用該方法如何繪製出效果。
引數說明：
看到這裡，大家就會明白怎麼畫圓了把，只要讓起始角和結束角度為乙個圓周就可以了。
下面開始畫圖咯！
環形進度條主要兩部分組成，一是灰色圓，另一是藍色弧度。也就是說灰色圓圈和藍色弧同圓心同半徑。知道了原理大家是不是覺得瞬間簡單好多。。。
function circle()circle.prototype.draw = function(ctx) ;當然這樣是畫不出來的，我們繼續往下看。
這部分說白了就是和灰色圓圈同圓心同半徑的一條藍弧。
function ring(startangle, percent)ring.prototype = object.create(circle.prototype);ring.prototype.drawring = function(ctx)canvas是不是還沒定義吶？別急，咱慢慢來～
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方法的弧度是怎麼開始的呢？先看圖！
怎麼樣，明白了嗎？是不是覺得**不對勁呢～上學時學的第一象限0～π/2(右上角)，怎麼看起來是反的呢，這就是差異啊！！細心的童鞋可能會注意到arc方法不是還有最後乙個引數嘛，還是可選的，當counterclockwise引數為true時，你們猜這逆天的座標軸會變成我們熟悉的嗎？哎～摸摸頭。。。人家這引數只是讓弧度逆時針轉了而已，座標軸弧度還是不變滴～
好了，說了這麼多，是不是該動起來了呢，直接上**。
ring.prototype.drawring = function(ctx)// anglectx.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方法替換為上面的就行。
小夥伴們自己動手畫個吧～
" xml:lang="en"> 0%
canvas 圓形進度條
canvas width 800 height 800 style border 1px solid ccc canvas const can document.getelementbyid canvas const van can.getcontext 2d let currentdeg 0 度從...
圓形進度條
public class circleprogress extends view public int getmheight public void setmheight int mheight public int getmwidth public void setmwidth int mwidt...
使用canvas畫圓形（弧形）進度條
效果如下 可以展示整個圓 半圓以及任意角度弧形 左右對稱 的進度條。整體思路如下 完整 如下 關於動畫部分，可以使用requestanimationframe做優化，函式改寫如下 function draw percent,sr if sr math.pi 2 sr 3 2 math.pi var ...