如何在 html canvas 中获取动画方向？

Question

我想在 html canvas 上制作一个矩形动画。当用户单击 canvas 时，矩形将开始动画，并转到单击的位置。我使用 delta x 和 y 从矩形的 x 和 y 位置添加和减去像素。但是这个解决方案的问题是，我找不到让矩形在直线路径上动画的方法。

我的代码：

'use strict'

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
const ratio = Math.ceil(window.devicePixelRatio)
let height = window.innerHeight
let width = window.innerWidth

canvas.height = height * ratio
canvas.width = width * ratio
canvas.style.height = `${height}px`
canvas.style.width = `${width}px`
ctx.setTransform(ratio, 0, 0, ratio, 0, 0)


let position = {
  x: 0,
  y: 0,
  deltaX: 0,
  deltaY: 0,
  size: 20
}

let move = {
  x: 0,
  y: 0,
}

function animate() {
  if (position.x === move.x && position.y === move.y) {
    cancelAnimationFrame()
  }
  if (position.x !== move.x) {
    ctx.fillRect(position.x, position.y, position.size, position.size)
    position.x += position.deltaX
  }
  if (position.y !== move.y) {
    ctx.fillRect(position.x, position.y, position.size, position.size)
    position.y += position.deltaY
  }
  requestAnimationFrame(animate)
}

function moveTo(x, y) {
  move.x = x
  move.y = y
  position.deltaX = position.x > x ? -1 : 1
  position.deltaY = position.y > y ? -1 : 1
  animate()
}

canvas.addEventListener('click', (event) => {
  moveTo(event.clientX, event.clientY)
})

ctx.fillRect(position.x, position.y, position.size, position.size)

<canvas id="canvas">
        </canvas>

如果您单击 canvas 矩形将开始移动，但它会走一条奇怪的路径，我找不到在单击的位置正确直线移动的方法。

在 Github page

查看演示

Answer 1

这是我刚才做的数学示例...
有不明白的地方问

在您的代码中，它的移动“很奇怪”，因为您的 delta 值始终为 1 或 -1，没有小数，这限制了物体移动的方式，相反我们使用角度进行计算。

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

let player = { 
  x: 0, y: 0, size: 10,
  delta: { x: 0, y: 0 }, 
  move: { x: 0, y: 0 } 
}

function animate() {
  let a = player.x - player.move.x;
  let b = player.y - player.move.y;
  if (Math.sqrt( a*a + b*b ) < 2) {
    player.delta = { x: 0, y: 0 }
  }
  player.x += player.delta.x
  player.y += player.delta.y
  ctx.fillRect(player.x, player.y, player.size, player.size)
  requestAnimationFrame(animate)
}

function moveTo(x, y) {
  player.move.x = x
  player.move.y = y
  let angle = Math.atan2(y - player.y, x - player.x)
  player.delta.x = Math.cos(angle)
  player.delta.y = Math.sin(angle)
}

canvas.addEventListener('click', (event) => {
  moveTo(event.clientX, event.clientY)
})

animate()

<canvas id="canvas"></canvas>

如何在 html canvas 中获取动画方向？

How to get animation direction in html canvas?

javascript

animation

html5-canvas