Javascript 如何创建部分圆/圆弧？

附上strapfork.com上的屏幕抓图。（如果你在StrapWork.com页面的下方稍微滚动一下，在统计中，你会看到一个圆弧，它的颜色部分与数字成比例。）如何构建这样的小部件

他们似乎在使用某种javascript，但我不知道如何复制

---

与Spudley的评论相同：Raphael负责这项工作，它甚至可以在较旧的浏览器（IE7…）上工作

一点三角学和拉斐尔路径对象就是你需要的。请尝试以下代码作为示例：

HTML:

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

---

可能与canvas元素、SVG或组合一起使用。看一看，您也可以参考此问题。使用SVG进行类似的图形处理。它可以用纯HTML+CSS完成，但是CSS的功能是有限的；改用SVG，当你需要做一个小小的改变时，你会感谢自己，这在CSS中是非常困难的。任何解决方案（包括SVG）都可能涉及javascript。大多数其他选择也意味着放弃IE8支持。我能推荐的最好的是，因为它使用SVG，但也支持旧的IE。

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");