使用DIV DOM元素創建一個弧和一個餡餅

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

它看起來像下面的圖片：

我想也產生電弧和餡餅。

在上面的第二圖像時，用戶將只輸入和弧的end angle。在我們的例子中，起始角度是180度，結束角度是360度。

我也想創建一個餅圖，其中用戶必須輸入圓/橢圓的內半徑，起始角度和結束角度。

在第三畫面，inside radius是圓形/橢圓形的寬度的50%，起始角度是90度和結束角度是360也。

可能嗎？

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

來源

2016-07-07 Qerjiuthn

你可以使用畫布輕鬆地繪製這個 –

這裏是餡餅https://jsfiddle.net/63wnb5gu/ –

@FastSnail - >但是我怎樣才能指定我的起始角度和結束角度？ – Qerjiuthn

正如我所說的畫布是繪製這種東西的很好的解決方案但是既然你不想使用畫布，你可以使用邊框樣式來繪製圓弧但圓弧的角度應該是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 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; 
 
}

<body> 
 
    <div class="user-input"> 
 
    <label>start angle</label> 
 
    <input type="text" id="startangle" value="0" /> 
 
    <label>end angle</label> 
 
    <input type="text" id="endtangle" value="180" /> 
 
    <button onclick="getinput()">draw</button> 
 
    </div> 
 
    <div id="circle"> 
 

 
    </div> 
 
</body>

爲你的最後一圈[2個重疊圓圈]角度是0和270.to關閉圓圈，你可以定位2個div並旋轉它們。

來源

2016-07-07 04:48:56

使用DIV DOM元素創建一個弧和一個餡餅

回答

相關問題