在值为2.0的horizontalBar上绘制垂直线

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 绘制水平条
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(10, 0);
ctx.lineWidth = 2;
ctx.stroke();

// 绘制垂直线
var h = 100; // 垂直线的高度
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, h);
ctx.lineWidth = 2;
ctx.stroke();

<svg width="100" height="100">
  <!-- 绘制水平条 -->
  <line x1="0" y1="0" x2="10" y2="0" stroke="black" stroke-width="2" />

  <!-- 绘制垂直线 -->
  <line x1="x" y1="0" x2="x" y2="h" stroke="black" stroke-width="2" />
</svg>