javascript - 在框内水平移动垂直线

Question

我是 html5 canvas 新手。我正在尝试在 Canvas 上制作一个盒子。我想要在这个盒子里面有一条垂直线(高度等于盒子高度)。我希望这条线在水平方向移动，比如在暂停和播放按钮上。我做不到。有人可以帮我吗？

我编写了在框中制作垂直线的代码。

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>
    );
  }
}

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

Answer 1

您需要创建一个函数，该函数将首先清理之前绘制的线条，然后在特定的 X 位置绘制新线条。

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

这是带有播放/暂停按钮示例的代码片段。

var left = 0;

const btn = document.getElementById("btn");
canvas = document.getElementsByTagName("canvas")[0];
ctx = canvas.getContext("2d");
const w = canvas.width;
const h = canvas.height;

let xPos = 0;
let playing = false;

function updateVert() {
  if(!playing) {
    cancelAnimationFrame(updateVert);
    return;
  }
  
  xPos += 1;
  
  if(xPos >= w) {
    // stop animation...
    xPos = 0;
    playing = false;
    btn.value = "Play";
  }
  
  // reset rectangle content to erase previous line...
  ctx.clearRect(0, 0, w, h);
  
  // draw new one...
  ctx.beginPath();
  ctx.strokeStyle = "#19f";
  ctx.lineWidth = 2;
  ctx.moveTo(xPos, 0);
  ctx.lineTo(xPos, 200);
  ctx.stroke();
  
  if(playing) requestAnimationFrame(updateVert);
}

document.getElementById("btn").addEventListener('click', function(e) {
  e.preventDefault();

  if(playing) {
    // pause...
    playing = false;
  }
  else {
    playing = !playing;
    updateVert();
  }
  
  btn.value = playing?"Pause":"Play";
});

canvas {
  border: 1px solid silver;
}

<div className="App">
  <canvas id="DemoCanvas" width="200" height="80"></canvas>
</div>
<input type="button" id="btn" value="Play">