用html5製作圓形進度條sgg

我用畫布製作了這個圓形圖。 Canvas Circular Graph 綠色進度從120度順時針開始，順時針結束於60度。在畫布上你可以這樣做用html5製作圓形進度條sgg

context.arc(centerx, centery,radius, startangle, endangle, anticlockwise);

但是我發現它對SVG太難了。任何人都可以告訴我如何從SVG中做到這一點。我喜歡從SVG中完成它的原因是，當進度動畫時，當畫面放大時，畫布質量會降低。順便說一句，如果你需要一個代碼，我可以給你。它具有高度可配置性：

你使用任何庫來構建SVG？對於'path'元素從頭開始使用SMIL可能有點棘手。 –

我沒有使用任何庫！ –

如果畫布上的質量降低，那麼你做錯了什麼。 SVG將被轉換爲位圖，就像繪製在畫布上的任何形狀一樣，這裏沒有區別（除了位圖縮放後的圖像）。請使用畫布分享您使用的代碼。這聽起來像忘記爲每一幀清除畫布或忘記使用beginPath。 – K3N

畫布的弧指令非常簡單。但是在SVG中，您必須使用路徑來繪製循環進度，並且它有點複雜。用於製造進展的代碼是

<path d="M startx starty A radiusx radiusy x-axis-rotation large-arc-flag sweep-flag endx endy " />

後面繪圖進度的想法是，你必須繪製從一個圓的，從指定的角度開始，在規定的角度結束的圓周穿過的路徑。有在圈子，你可以使用SVG

x = centerx + radius * Math.cos(anglein radians); 
y = centery + radius * Math.cos(anglein radians);

爲了簡化事情，創造路徑的周圍尋找點的數學公式，我發現，計算路徑的功能。你只需要這樣寫：

progress(200, 200, 120, -150, 150);

進度函數採用下列參數：

progress(centerx,centery,startangle,endangle);

這吸引你要更改的進度更改結束角度，即降低其全progress.If。這只是繪製循環路徑的想法。

2013-12-15 12:54:31 bring2dip

回答