Javascript 怎么画这个箭头？

有两个数组，其中的数字是随机选择的。有一把尺子。应该出现从0到第一个音节的箭头。例如，如果第一个音节是7，那么箭头应该在0到7之间。怎么画这样的箭？附上照片

无线直尺：

带直线的直尺：

var x=[5,6,7,8]；
变量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=''+x[randX]+''++'+''+y[randY]+''
ABCDE
您可以使用下面的代码用您的业务逻辑为箭头画一条弧，以生成所需的标尺



您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
ctx.moveTo（10,70）；
贝塞尔曲线图（10，-20,200，-20,200,70）；
ctx.lineJoin=“圆形”；
ctx.moveTo（210,30）；
ctx.lineTo（200,70）；
ctx.lineTo（180,40）；
ctx.stroke（）；
此代码给出了您想要的确切结果

JS小提琴链接-


var范围=16/*您可以将任何值作为标尺*/
对于（i=0；i

#我的画布{
位置：绝对位置；
浮动：左；
}
.lineContainer{
位置：绝对位置；
浮动：左；
宽度：90%；
利润上限：70像素；
}
.线路{
边框顶部：1px纯蓝色；
右边框：1px纯蓝色；
宽度：20px；
高度：10px；
浮动：左；
保证金：0；
填充：0；
}
.数字容器{
位置：绝对位置；
顶部：10px；
保证金：0；
填充：0；
}
.号码{
宽度：21px；
浮动：左；
保证金：0；
填充：0；
文本对齐：居中；
}
第无数{
宽度：11px；
高度：5px；
浮动：左；
保证金：0；
填充：0；
}

您的浏览器不支持HTML5画布标记。
StackOverflow的可能重复不是代码编写服务。当你有了尺子的
或
表示（假设你在这个过程中没有弄清楚箭头）时，请回来。步骤1：学习一个允许你在画布上绘制的库。使用。