我正在尝试移动<canvas>上的图像以跳转。
index.html
<!DOCTYPE html>
<html>
<head>
<title>Ball Jump</title>
</head>
<body>
<img src="./assets/ball.png" height="0px" width="0px" id="ball">
<br>
<br>
<canvas height="210px" width="350px" id="paper" onclick="play()"></canvas>
<script type="text/javascript" src="./main.js"></script
</body>
</html>
main.js
'use strict'
var paper = document.getElementById('paper');
var ball = document.getElementById('ball');
var brush = paper.getContext('2d');
brush.drawImage(dino, 0, 150, 70, 50);
var y = 150;
function play() {
up();
function up() {
if (y > 50) {
brush.clearRect(0, y-1, 70, y+50);
brush.drawImage(ball, 0, y, 70, 50);
y--;
}
else { clearInterval(jump); }
}
var jump = setInterval(up, 10);
function down() {
if (y < 150) {
brush.clearRect(0, y-1, 70, y+50);
brush.drawImage(ball, 0, y, 70, 50);
y++;
}
else { clearInterval(fall); }
}
var fall = setInterval(down, 10);
}
但是问题是，球滞后并且需要更多的时间来上升，但是即使两个功能都设置为10ms，它也会下降得很好。请帮忙!!!
对于在浏览器上流畅运行的动画，您应该真正使用requestAnimationFrame循环而不是setInterval
在此处查看示例：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations
这是为什么：Why is requestAnimationFrame better than setInterval or setTimeout。
此外，之前也曾问过类似的问题，因此，下次请确保在发布前进行搜索以防止重复。