Javascript 使用DIV DOM元素创建圆弧和饼图

我使用

div

DOM元素创建了一个椭圆

var body = document.querySelector('body');
var div = document.createElement('div');
div.style.borderRadius = '50%';
div.style.border = '1px solid red'; 
div.style.left = '60px'; 
div.style.top =  '60px';
div.style.width = '100px';
div.style.height = '100px'; 
body.appendChild(div);

如下图所示：

我还想创建一个圆弧和一个饼图

在上面的第二幅图中，用户只需输入弧的

起始角度

和

结束角度

。在我们的例子中，起始角是

180

度，结束角是

360

度

我还想创建一个饼图，其中用户必须输入圆/椭圆的内半径、起始角度和结束角度

在第三幅图中，

内半径

为圆/椭圆宽度的

50%

，起始角为

90

度，终止角也为

360

可能吗

---

注：我不想在画布上绘制，也不想使用svg。

正如我所说，画布是绘制这类东西的很好的解决方案。然而，既然你不想使用画布，你可以使用边框样式来绘制圆弧，但圆弧的角度应该是

90deg

的倍数，比如

0 90 180 270 360

。然而，起始角度可以是任何角度0,5,10,7

这里有一个例子

要获得给定的第二个圆弧的效果，请将起始角度输入为

0

，将结束角度输入为

180

。因为绞合角系统是：见下图

运行此代码

var border=['border-top-color'、'border-right-color'、'border-bottom-color'、'border-left-color']；
var圈；
var标准差=135；
函数getinput（）{
圆圈=document.getElementById（“圆圈”）；
var startAngle=document.getElementById（“startAngle”）.value；
var endAngle=document.getElementById（“endtangle”）.value；
var角度=端角-星形缠结；
如果（角度%90！=0）{
警报（“plz输入90的倍数”）；
}否则{
var零件=角度/90；
绘制（零件、星形缠绕）；
}
}
功能图（零件、startAngle）{
var style=“”；
对于（变量i=0；i

#圆圈{
边界半径：50%；
边框：10px实心透明；
高度：100px；
宽度：100px；
利润率：10px自动；
}

起始角
端角
画

您可以使用画布轻松绘制此图。这里是pie@FastSnail-->但如何指定起始角度和结束角度？此方法非常有限，您只能绘制45度倍数的角度。例如，你不能画30角的弧。我想你可以用渐变样式画更多的角。对不起，实际上是90秒的倍数，你不能画45，但可以画90 180 360。你想让用户画这些角以外的角吗？