cancelAnimationFrame() 在条件为真时不工作 - JS Canvas
cancelAnimationFrame() not working when a conditional is true - JS Canvas
我正在使用 JS Canvas 构建一个类似于 Chicken Invaders 的小游戏。目前,我对当敌人击中您的船时您的船爆炸的效果感到困惑。我正在尝试在单独的文件中自行创建效果。
我的想法是,当敌人击中你时,会快速连续播放一系列图像(14 个图像),从而给人一种爆炸的错觉。所以我确实包含了 <img>
标签,我将它们全部放在一个数组中(使用 querySelectorAll
),然后我创建了爆炸效果。我使用计数器遍历数组并相应地显示每个图像。
但随后计数器不断增加,因此最终会导致 indexError
,因为它超出了数组的范围。我尝试使用return
终止函数和cancelAnimationFrame()
,但它们都没有用。
结果是控制台中不断出现每秒 60 个错误(当然,这会搞砸一切)够了 jebba-jabba,这是 JS 的 link-Fiddle:
https://jsfiddle.net/h7Lvpytm/8/
这是我解决这个问题的尝试:
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const video = document.querySelector("video");
const boomFrames = document.body.querySelectorAll("img");
let counter = 0;
function drawBoom() {
requestAnimationFrame(drawBoom)
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.drawImage(boomFrames[counter], 0, 0, 200, 96);
counter++;
if (counter > 13) {
cancelAnimationFrame(drawBoom)
}
}
drawBoom()
编辑:我也尝试了 while
循环,但它甚至没有显示爆炸。这让我抓狂。
cancelAnimationFrame
takes an id as returned from requestAnimationFrame
let counter = 0;
function drawBoom() {
const requestId = requestAnimationFrame(drawBoom)
counter++;
if (counter > 13) {
cancelAnimationFrame(requestId);
}
}
drawBoom()
或者正如 Kaiido 指出的那样,您可以不请求帧停止
let counter = 0;
function drawBoom() {
counter++;
if (counter <= 13) {
requestAnimationFrame(drawBoom);
}
}
drawBoom()
我正在使用 JS Canvas 构建一个类似于 Chicken Invaders 的小游戏。目前,我对当敌人击中您的船时您的船爆炸的效果感到困惑。我正在尝试在单独的文件中自行创建效果。
我的想法是,当敌人击中你时,会快速连续播放一系列图像(14 个图像),从而给人一种爆炸的错觉。所以我确实包含了 <img>
标签,我将它们全部放在一个数组中(使用 querySelectorAll
),然后我创建了爆炸效果。我使用计数器遍历数组并相应地显示每个图像。
但随后计数器不断增加,因此最终会导致 indexError
,因为它超出了数组的范围。我尝试使用return
终止函数和cancelAnimationFrame()
,但它们都没有用。
结果是控制台中不断出现每秒 60 个错误(当然,这会搞砸一切)够了 jebba-jabba,这是 JS 的 link-Fiddle:
https://jsfiddle.net/h7Lvpytm/8/
这是我解决这个问题的尝试:
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const video = document.querySelector("video");
const boomFrames = document.body.querySelectorAll("img");
let counter = 0;
function drawBoom() {
requestAnimationFrame(drawBoom)
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.drawImage(boomFrames[counter], 0, 0, 200, 96);
counter++;
if (counter > 13) {
cancelAnimationFrame(drawBoom)
}
}
drawBoom()
编辑:我也尝试了 while
循环,但它甚至没有显示爆炸。这让我抓狂。
cancelAnimationFrame
takes an id as returned from requestAnimationFrame
let counter = 0;
function drawBoom() {
const requestId = requestAnimationFrame(drawBoom)
counter++;
if (counter > 13) {
cancelAnimationFrame(requestId);
}
}
drawBoom()
或者正如 Kaiido 指出的那样,您可以不请求帧停止
let counter = 0;
function drawBoom() {
counter++;
if (counter <= 13) {
requestAnimationFrame(drawBoom);
}
}
drawBoom()