我想在 html 畫布上為矩形設定影片。當用戶單擊畫布時，矩形將開始影片，并轉到單擊位置。我使用 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>如果您在畫布中單擊，矩形將開始移動，但它會走一條奇怪的路徑，我找不到在單擊的位置正確直行的方法。
在Github 頁面查看演示
uj5u.com熱心網友回復：
這是我不久前做的事情的示例數學......
如果有什么你不明白的地方問
在您的代碼中，它移動“很奇怪”，因為您的 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/340259.html
標籤：javascript 动画片 html5-canvas
下一篇：人人都寫過的5個Bug！