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

これは、下の画像のようになります。私は、アークやパイを作成することも必要

。上記第2の画像内の

、ユーザは単に入力とアークのend angleします。我々の場合、開始角度は180度であり、終了角度は360度です。

円と楕円の内側の半径、開始角度と終了角度を入力する必要がある円グラフも作成します。第三の画像に

inside radiusは、円/楕円の幅の50%であり、出発角度は90度であり、終了角度も360あります。

それは可能ですか？

P.S：キャンバスに描画したり、svgを使用したりしません。

出典

2016-07-07 Qerjiuthn

これはキャンバスを使用して簡単に描くことができます –

ここは円ですhttps://jsfiddle.net/63wnb5gu/ –

@FastSnail - >しかし、開始角度と終了角度はどのように指定できますか？ – Qerjiuthn

私はキャンバスが、あなたが弧を描くように境界線のスタイルを使用することができますキャンバスを使用したくないので、things.howeverのこの種を描画するために非常に良い解決策ですが、円弧の角度が0 90 180 270 360 .however開始などの90deg倍数でなければなりません言ったように角度は任意の角度0,5,10,7 ...

ここは一例です。

与えられた2番目の円弧の効果を得るには、開始角度を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要素を使用して円弧と円を作成

答えて

関連する問題