使用DIV DOM元素创建Arc和Pie

Question

我使用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);

如下图所示：

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

在上面的第二张图片中，用户只需输入弧的starting angle和end angle。在我们的例子中，起始角度为180度，结束角度为360度。

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

在第三张图片中，inside radius为圆/椭圆宽度的50%，起始角度为90度，结束角度为360

有可能吗？

P.S：我不想在画布上画画或使用svg。

Answer 1

正如我所说，画布是绘制此类东西的非常好的解决方案。但是，由于您不想使用画布，您可以使用边框样式绘制弧，但弧的角度应为90deg倍数，如{ {1}}。但是起始角度可以是任何角度0,5,10,7 ...

这是一个例子。

获取您给出的第二个弧的效果，输入起始角度为0 90 180 270 360，结束角度为0。因为绞合角系统是：见下图

运行此代码

180

var border = ['border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'];
var circle;
var standeredRotation = 135;

function getinput() {
  circle = document.getElementById("circle");
  var startAngle = document.getElementById("startangle").value;
  var endAngle = document.getElementById("endtangle").value;
  var angle = endAngle - startAngle;
  if (angle % 90 != 0) {
    alert("plz enter 90's multiples");
  } else {
    var parts = angle / 90;
    draw(parts, startAngle);
  }

}

function draw(parts, startAngle) {
  var style = "";
  for (var i = 0; i < parts; i++) {
    style += border[i] + ": #FF4E4E;";
  }
  circle.setAttribute("style", style);
  totalAngle = standeredRotation + parseInt(startAngle);
  circle.style.transform = 'rotate(' + totalAngle + 'deg)';
}

#circle {
  border-radius: 50%;
  border: 10px solid transparent;
  height: 100px;
  width: 100px;
  margin: 10px auto;
}

为你的最后一个圆圈[2个重叠圆圈]角度为0和270.要关闭圆圈，你可以定位2个div并旋转它们。