Javascript 在方框内水平移动垂直线

我是html5画布的新手。我想在画布上做一个盒子。我想在这个盒子里画一条垂直线（高度等于盒子高度）。我想让这条线在水平方向上移动，比如说暂停和播放按钮。我做不到。有人能帮我吗

我写的代码是在一个盒子里画一条垂直线

class App extends Component {

    componentDidMount(){
        canvas = document.getElementsByTagName("canvas")[0];
        ctx = canvas.getContext("2d");

        ctx.beginPath();

        ctx.moveTo(0,0);

        ctx.lineTo(0,200);

        ctx.stroke();

        ctx.fillStyle = "#808891";
    }


  render() {
    return (
      <div className="App">

          <canvas id="DemoCanvas" width="500" height="200"></canvas>
      </div>
    );
  }
}

类应用程序扩展组件{
componentDidMount（）{
canvas=document.getElementsByTagName（“canvas”）[0]；
ctx=canvas.getContext（“2d”）；
ctx.beginPath（）；
ctx.moveTo（0,0）；
ctx.lineTo（0200）；
ctx.stroke（）；
ctx.fillStyle=“#808891”；
}
render（）{
返回(
);
}
}

---

但我不知道如何使这条线沿水平方向移动（将其视为视频时间轴的标记）

试试看，它将基于给定的点创建水平线

canvas=document.getElementsByTagName（“canvas”）[0]；
ctx=canvas.getContext（“2d”）；
ctx.beginPath（）；
//起点
ctx.moveTo（0,0）；
//终点
ctx.lineTo（500,0）；
ctx.stroke（）；
ctx.fillStyle=“#808891”
您需要创建一个函数，该函数将首先清理先前绘制的线，然后在特定的X位置绘制新线

然后，在每次需要时使用新的X位置调用此函数，例如使用requestAnimationFrame

下面是一个带有播放/暂停按钮示例的片段


var left=0；
const btn=document.getElementById（“btn”）；
canvas=document.getElementsByTagName（“canvas”）[0]；
ctx=canvas.getContext（“2d”）；
const w=画布宽度；
常数h=画布高度；
设xPos=0；
让玩=假；
函数updateVert（）{
如果（！玩）{
取消动画帧（updateVert）；
回来
}
xPos+=1；
如果（xPos>=w）{
//停止动画。。。
xPos=0；
玩=假；
btn.value=“播放”；
}
//重置矩形内容以删除上一行。。。
ctx.clearRect（0，0，w，h）；
//画一个新的。。。
ctx.beginPath（）；
ctx.strokeStyle=“#19f”；
ctx.lineWidth=2；
ctx.moveTo（xPos，0）；
ctx.lineTo（xPos，200）；
ctx.stroke（）；
如果（播放）requestAnimationFrame（更新帧）；
}
document.getElementById（“btn”）.addEventListener（'click'，函数（e）{
e、 预防默认值（）；
如果（玩）{
//暂停。。。
玩=假；
}
否则{
玩=！玩；
updateVert（）；
}
btn.value=播放？“暂停”：“播放”；
});
画布{
边框：1px纯银；
}

发布您的trying@PandiyanCool现在检查我发布的代码是否正确。我想要一条垂直线，而不是水平线。现在我想让那条线在水平方向上移动一条滑块。太棒了。有没有可能我也可以实现拖动功能？当然，但这超出了这个问题的范围。您最好创建一个新的，以提高可见性。