Question

有两个数组，其中数字是随机选择的。有一个统治者。应出现从0到第一个音节的箭头。例如，如果第一个音节是7，那么箭头应该是0到7.如何绘制这样的箭头？附上图片。

没有线的标尺：

带线的标尺：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以使用以下代码为您的业务逻辑绘制箭头弧以生成所需的标尺。

＆＃13;

<!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>

＆＃13;

Answer 2

此代码提供了您想要的确切结果。

JS小提琴链接 - 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>

如何画这个箭头？

2 个答案: