javascript - 使用 CSS 绘制圆形元素

Question

我有一个使用以下样式创建的圆圈:

.circle {
  width: 150px;
  height: 150px;
  border-radius: 100%;
  -webkit-border-radius: 100%;
}

我想在这个圆圈周围画一个轮廓，但是，我希望它只围绕圆圈的一部分以产生一个百分比。

例如:

• 50% 会在中午 12 点到 6 点开始画大纲
• 25% 会在中午 12 点到 3 点开始画大纲
• 66% 的人会在 12 点到 8 点开始画大纲

根据宽度和高度的定义，我可以通过在相同位置创建一个稍微大一点的圆来创建轮廓来解决这个问题，尽管我不知道如何创建“饼”形状。

我还希望能够支持尽可能多的浏览器。

提前致谢。

Answer 1

基本上，您可以使用任何能够生成饼图的库，然后在饼图中放置一个与您的页面(或元素)背景颜色相匹配的圆圈，使其看起来像一个圆环图(实际上圆环图就是你正在寻找)。当然，您的应用程序只使用两个片段。

https://github.com/azagniotov/pielicious

附加到 http://raphaeljs.com/

即使在 IE8 上也能完美运行。

我将其改编为自定义 knockout.js在我当前的元素中绑定(bind)。这是结果的样子: