如何使用HTML5和＆amp ;;创建一个圆圈中的细分CSS3

Question

可以根据输入在圆圈内创建一个段。我试图通过创建段来表示圆形的分数值，例如： -

有一个div

<div class="circle">
</div>

    circle has a width of 150px & height as well now with a border radius of 50%;

我想取分子的输入值，分母显示圆div中的段数

例如像这样

Answer 1

由于您要处理可能复杂的角度，我建议您使用canvas。以下是您如何实现所需目标的示例：

＆＃13;

＆＃13;

//Getting the context for the canvas
var canvas = document.getElementById('fraction');
var context = canvas.getContext('2d');

var x = 80; // X coordinate for the position of the segment
var y = 80; // Y coordinate for the position of the segment
var radius = 75; // Radius of the circle

// This is what you will be changing
// Maybe get these values from a function that pulls the numbers from an input box
var numerator = 1;
var denominator = 4;
var fraction = numerator / denominator; // The angle that will be drawn

// For plotting the segments
var startAngle = Math.PI;
var endAngle = (1 + (2 * fraction)) * startAngle;

// If the circle is draw clockwise or anti-clockwise
// Setting this to true will draw the inverse of the angle
var drawClockwise = false;

// Drawing the segment
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, drawClockwise);
context.lineTo(x, y);
context.closePath();
context.fillStyle = 'yellow';
context.fill();

//***************** Edit *******************

// This will add the circle outline around the segment
context.beginPath();
context.arc(x, y, radius, 0, Math.PI * 2, drawClockwise);
context.closePath();
context.strokeStyle = '#000';
context.stroke();

＆＃13;

<div>
  <canvas id="fraction" width="200" height="200"></canvas>
</div>

＆＃13;

＆＃13;

＆＃13;

在上面的代码中，您可以使用变量，但您感兴趣的主要变量是numerator，denominator和fraction。这些组成了上面提到的分数，用于绘制正确的分段。

您还可以使用其他变量来更改形状的大小和位置，以及绘制它的方向。但是，您不仅限于此，还有许多其他内容可以更改！

Here是在画布上绘制圆圈和线段的示例，here是如何设置和更改形状的颜色和轮廓的示例，here是一般介绍帆布。

我希望这有帮助！

祝你好运：）