CODEWITHSUNDEEP
javascript
Wexzuq
Wexzuq

Reputation: 49

How to draw this arrow?

There are two arrays, of which numbers are chosen at random. There is a ruler. The arrow from 0 to first syllable should appear. For example, if the first syllable is 7, then the arrow should be from 0 to 7. How to draw such an arrow? Attached the picture.

Ruler without line: enter image description here

Ruler with line: enter image description here 

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>

Upvotes: 1

Views: 310

Answers (2)

Narendra Kumar
Narendra Kumar

Reputation: 51

You may use the below code to draw an arc for the arrow with your business logic to generate the desired ruler.

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

Upvotes: 1

Deepak Kumar
Deepak Kumar

Reputation: 221

This code is giving the exact result you wanted.

JS Fiddle Link - https://jsfiddle.net/deepak104080/odj5yy0h/14/

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

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

	var div2 = document.createElement("div2");
	div2.className += "line"
	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>

Upvotes: 1

Related Questions