如何在使用HTML5和CSS3的圆中创建分段

可以根据输入在圆内创建分段。我试图通过例如创建的段来表示在圆的形式的分数值： -如何在使用HTML5和CSS3的圆中创建分段

有一个div

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

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

我想利用分子的输入值和分母显示的数目在圈内的div

段例如这样

来源

2016-08-01 Tayyab Gulsher Vohra

你想用div和CSS做这个吗？或者你会看着画在画布上？ –

如果你是一些古怪的CSS，并不需要支持太多的传统浏览器 - https://www.smashingmagazine.com/2015/07/designing-simple-pie-charts-with-css/ – dmoo

@NicholasRobinson它没有关系，但在输入的基础上，我想开发一些像这样的东西在图片中给出 –

由于您将要处理可能复杂的角度，我建议您使用canvas。这里是你如何能达到你所期待的一个例子：

//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();

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

在上面的代码，你可以用变量玩，但你会有兴趣的主要因素是numerator,denominator和fraction。这些组成了你在上面提到的分数，并用于绘制正确的分段。

你也可以玩其他变量来改变形状的大小和位置，它的绘制方向。你并不仅限于这些，还有很多其他的东西可以改变！

Here是画圆和段到画布上的一个例子，是here的一例如何设置和改变形状的颜色和轮廓和here是介绍在一般以帆布。

我希望这有助于！

祝你好运:)

来源

2016-08-02 08:27:20

如何在使用HTML5和CSS3的圆中创建分段

回答

相关问题