如何創建部分圓/弧？

Question

從strapfork.com附加此屏幕抓取。 （如果您在strapfork.com頁面上略微滾動，在統計數據中，您會看到圓形的顏色部分與數字成比例的圓弧。）如何構建這樣的小部件？

他們正在使用某種JavaScript似乎，但我不知道如何複製相同。

Answer 1

同Spudley的評論：拉斐爾做這項工作，它的作品甚至在舊的瀏覽器（IE7 ...）

三角和拉斐爾Path對象的一點是你所需要的。嘗試下面的代碼作爲示例：

HTML：

<div id="mytest"></div> 

JS：

var paper = Raphael('mytest', 500, 400); 

var background = paper.rect(0, 0, 500, 400, 0); 
background.attr("fill", "#ffffff").attr("stroke", "none"); 

var centerX = 200, centerY = 200, Radius = 100, percent = 95; 
// change the percent value between 0 and 100 

var startArcX = centerX + Radius * Math.cos(Math.PI/2); 
var startArcY = centerY - Radius * Math.sin(Math.PI/2); 

var endArcX = Math.round(centerX + Radius * Math.cos(Math.PI * (0.5 - 0.02 * percent))); 
var endArcY = Math.round(centerY - Radius * Math.sin(Math.PI * (0.5 - 0.02 * percent))); 

var bigArc = (percent>50)?1:0; 

var directionDrawing = 1; 

var stringPath = 'M' + startArcX.toString() + ',' + startArcY.toString() 
       + ' A' + Radius.toString() + ',' + Radius.toString() 
       + ' 0 ' 
       + bigArc.toString() + ',' + directionDrawing.toString() + ' ' 
       + endArcX.toString() + ',' + endArcY.toString(); 



var path1 = paper.path(stringPath); 
path1.attr("stroke", "#ff0000").attr("stroke-width", "20px"); 

與畫布元件，SVG，或組合