この矢印を描くには？

2つの配列があり、そのうちの数はランダムに選択されます。定規があります。 0から最初の音節までの矢印が表示されます。たとえば、最初の音節が7の場合、矢印は0〜7でなければなりません。どのようにそのような矢印を描くのですか？画像を添付しました。ラインなしこの矢印を描くには？

ルーラー：行と

ルーラー：

var x = [5, 6, 7, 8]; 
 
var y = [1, 2, 3, 4]; 
 

 
var randX = Math.floor(Math.random() * x.length); 
 
var randY = Math.floor(Math.random() * y.length); 
 

 
const parent = document.querySelector('#parent'); 
 

 
parent.innerHTML = '<b>' + x[randX] + '</b>' + '+' + '<b>' + y[randY] + '</b>' ;

<div id="parent"><b>ABCDE</b></div>

出典

2017-12-21 Wexzuq

可能な複製（https://stackoverflow.com/questions/4270485/drawing-lines-on- html-page） – csmckelvey

StackOverflowはコード作成サービスではありません。あなたのルーラーの表現が「

ステップ1：キャンバスに描画できるライブラリを学んでください。 – epascarello

あなたのビジネスロジックを矢印の弧を描くように以下のコードを使用することができます所望の定規を生成する。

<!DOCTYPE html> 
 
\t <html> 
 
\t \t <body> 
 
\t \t \t <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 
 
\t \t \t \t Your browser does not support the HTML5 canvas tag. 
 
\t \t \t </canvas> 
 
\t \t \t <script> 
 
\t \t \t \t var c = document.getElementById("myCanvas"); 
 
\t \t \t \t var ctx = c.getContext("2d"); 
 
\t \t \t \t ctx.beginPath(); 
 
\t \t \t \t ctx.moveTo(10, 70); 
 
\t \t \t \t ctx.bezierCurveTo(10, -20, 200, -20, 200, 70); 
 
\t \t \t \t ctx.lineJoin = "round"; 
 
\t \t \t \t ctx.moveTo(210, 30); 
 
\t \t \t \t ctx.lineTo(200, 70); 
 
\t \t \t \t ctx.lineTo(180, 40); 
 
\t \t \t \t ctx.stroke(); 
 
\t \t \t </script> 
 
\t \t </body> 
 
\t </html>

出典

2017-12-21 19:54:04

このコードは、あなたが望んでいた正確な結果を与えています。

JSフィドルリンク - [htmlページに線を描く]のhttps://jsfiddle.net/deepak104080/odj5yy0h/14/

var range = 16; /*You can take any value for ruler */ 
 

 
for (i = 0; i < range; i++) { 
 
\t var div = document.createElement("div"); 
 
\t div.innerHTML = i; 
 
\t div.className += "number" 
 
\t document.getElementById("numberLeftEnd").appendChild(div); 
 

 
\t var div2 = document.createElement("div2"); 
 
\t div2.className += "line" 
 
\t document.getElementById("lineContainer").appendChild(div2); 
 
} 
 

 
var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 
ctx.beginPath(); 
 
ctx.moveTo(20, 70); 
 
ctx.bezierCurveTo(10, -20, 200, -20, 200, 70); 
 
ctx.lineJoin = "round"; 
 
ctx.moveTo(210, 50); 
 
ctx.lineTo(200, 70); 
 
ctx.lineTo(180, 55); 
 
ctx.stroke();

#myCanvas { 
 
    position:absolute; 
 
    float:left; 
 
} 
 
.lineContainer { 
 
    position:absolute; 
 
    float:left; 
 
    width: 90%; 
 
    margin-top:70px; 
 
} 
 
.line { 
 
    border-top: 1px solid blue; 
 
    border-right: 1px solid blue; 
 
    width: 20px; 
 
    Height: 10px; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.numberContainer { 
 
    position: absolute; 
 
    top: 10px; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.number { 
 
    width: 21px; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 
    
 
.numberLeftEnd { 
 
    width: 11px; 
 
    Height: 5px; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<body> 
 
<canvas id="myCanvas"> 
 
Your browser does not support the HTML5 canvas tag. 
 
</canvas> 
 
       
 
<div id="lineContainer" class="lineContainer"> 
 
    <div id="numberLeftEnd" class="numberContainer"> 
 
    <div class="numberLeftEnd"></div> 
 
    </div> 
 
</div> 
 
     
 
</body>

出典

2017-12-22 08:31:15

答えて

関連する問題