javascript - 这个箭头怎么画？-6ren

javascript - 这个箭头怎么画？

转载作者：行者123 更新时间：2023-11-30 14:52:17

25

4

有两个数组，其中的数字是随机选择的。有尺子。从 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>

最佳答案

此代码给出了您想要的确切结果。

JS Fiddle 链接 - 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>

关于javascript - 这个箭头怎么画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47930002/

25

4

0

文章推荐： c# - 使用 Visual Studio 和 .NET Framework 进行多目标构建

文章推荐： c# - 使用异步方法在 Teamcity 上运行 xUnit 测试

文章推荐： c# - 使用 TPH 的 Entity Framework 的多级继承

文章推荐： c# - 使用另一个列表的内容过滤一个列表

java - headless 画
我想以 headless 模式(屏幕上根本没有 GUI)将 JPanel 绘制到 BufferedImage 中。 final JPanel panel = createPanel(); panel.
javascript - 如何实现更逼真的粒子漂 float 画？
我是 Canvas 的新手，正在尝试创建看起来逼真的 float 粒子动画。目前，我正在创建 400 个随机散布在 400x400 Canvas 上的粒子。然后，在每个 requestAnimat
css - 如何在悬停时停止悬 float 画
有没有办法在悬停时停止悬 float 画？ :hover 这是一个显示动画的链接: https://codepen.io/youbiteme/pen/RprPrN 最佳答案只需为您的 svg 悬停添
java - 画 donut 谷歌地图Android
我想在谷歌地图上绘制覆盖图，其中除了特定点周围 1.5 公里半径以外的所有内容都被遮蔽了。为此，我尝试使用带有大量边框的圆圈，所以我会在边框中放置透明中心和覆盖颜色来实现这一点，但它无法渲染。
ios - 画(_直角: CGRect) not getting called in custom view
我正在尝试通过扩展类 UIView 来创建自定义 View ，该类可以在自定义 View 的中心显示一个圆圈。为了添加自定义绘图，我重写了 draw(_ rect: CGRect) 方法，如下所示。

首页

博学

6Ren·AI

商城

javascript - 这个箭头怎么画？