javascript - 带百分比颜色划分的空心圆

Question

我正在努力生成一个空心图形圆圈。每个部门应该跨越一个百分比。

问题陈述:如果您看到输出，形成圆圈的那 3 种颜色应该占据圆圈的百分比。例如，如果颜色 1 = 33%，颜色 2 = 33% 和颜色 3 = 33%，那么圆应该按三种相同的颜色比例。现在圆不是按照颜色的百分比划分的。任何帮助将不胜感激。

编辑:这可以使用 html canvas 实现吗？

.a{
    margin: 0;
    width: 90px;
    text-align: center;
    height: 90px;
    border-radius: 50%;
    border: 4px solid transparent;
    background-size: 100% 100%, 50% 50%, 50% 50%;
    background-repeat: no-repeat;
    background-image: linear-gradient(white, white), 
                    linear-gradient(30deg, rgb(240,120,16) 100%, lightgrey 0%),
                    linear-gradient(120deg, rgb(127,127,127) 100%, lightgrey 0%),
                    linear-gradient(310deg, rgb(255,192,0) 100%, lightgrey 0%);
    
    background-position: center center, left top, right top, left bottom, right bottom;
    background-origin: content-box, border-box, border-box, border-box, border-box;
    background-clip: content-box, border-box, border-box, border-box, border-box; 
}

<div class="a"></div>

Answer 1

您可以这样调整代码:

.a{
    margin: 0;
    width: 90px;
    text-align: center;
    height: 90px;
    border-radius: 50%;
    background-size:50% 100% ,100% 50%,100% 100%;
    background-position:100% 0,0 100%,0 0;
    background-repeat: no-repeat;
    background-image:
    linear-gradient(33deg,transparent 37%, green 0),     
    linear-gradient(-33deg, red 70%, blue 0%),     
    linear-gradient(to right, blue 50%, green 50%);
    position:relative;
}
.a:before {
  content:"";
  position:absolute;
  top:5px;
  right:5px;
  left:5px;
  bottom:5px;
  background:#fff;
  border-radius:50%;
}

<div class="a"></div>

顺便说一句，考虑使用 SVG 或更准确的工具来创建这样的图表更合适。这是 SVG 的一个想法:

.pie {
  width: 100px;
}

.pie circle {
  fill: none;
  stroke-width: 4;
  stroke-dasharray:55 110
}

<svg viewBox="0 0 64 64" class="pie">
  <circle r="40%" cx="50%" cy="50%"  stroke="red">
  </circle>
  <circle r="40%" cx="50%" cy="50%"  stroke=" green" stroke-dashoffset=" -55">
  </circle>
  <circle r="40%" cx="50%" cy="50%" stroke="blue" stroke-dashoffset="-110">
  </circle>
 
</svg>