HTML Canvas 如何让矩形向后移动？

Question

我的下面的代码会在我启动矩形时为矩形设置动画。我怎样才能让它同时向左生长？我已经尝试过 (line.x -= line.dx) 和其他一些变体，但它似乎不起作用。

   const line = {
        x: 600,
        y: 100,
        width: 1,
        height: 3,
        dx: 1,
        dy: 1,
    }

    let totalLineWidth = line.x + line.width;

    const drawLine = () => {
      ctx.fillRect(line.x, line.y , line.width, line.height)
    }


    const update = () => {

        drawLine()

        line.x += line.dx


    
        requestAnimationFrame(update)
    }
    update()

Answer 1

在向右绘制一个新位的同时，向左侧绘制一个新位。

左边的新位与右边的新位相同。这就是 (600 - (left.x - 600) - 如果你改变起始位置，当然更新 600。

在整个页面中运行这个sn-p，然后单击按钮开始绘图。

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const line = {
  x: 600,
  y: 100,
  width: 1,
  height: 3,
  dx: 1,
  dy: 1,
}

let totalLineWidth = line.x + line.width;

const drawLine = () => {
  ctx.fillRect(line.x, line.y, line.width, line.height);
  ctx.fillRect(600 - (line.x - 600), line.y, line.width, line.height);
}


const update = () => {

  drawLine()

  line.x += line.dx



  requestAnimationFrame(update)
}
//removed just for demo so we can wait until user clicks the button
//update()

canvas {
  background-color: pink;
  /* just for demo so we can see where the canvas is */
}

<button onclick="update(); this.style.display = 'none';">Click me to start</button>
<br>
<canvas width=1200 height=200></canvas>