Javascript 画布需要太多时间才能向上移动图片_Javascript_Html_Image_Canvas_Lag

Javascript 画布需要太多时间才能向上移动图片

javascript html image canvas

Javascript 画布需要太多时间才能向上移动图片,javascript,html,image,canvas,lag,Javascript,Html,Image,Canvas,Lag,我试图将上的图像移动到跳转位置 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 heigh

我试图将

上的图像移动到跳转位置

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>


跳球




50) {
clearRect（0，y-1，70，y+50）；
画笔图像（球，0，y，70，50）；
y--；
}
else{clearInterval（jump）；}
}
var跳跃=设置间隔（向上，10）；
函数down（）{
如果（y<150）{
clearRect（0，y-1，70，y+50）；
画笔图像（球，0，y，70，50）；
y++；
}
否则{clearInterval（fall）；}
}
var下降=设定间隔（下降，10）；
}

但问题是，球落后了，上升需要更多的时间，然而，即使两个功能都设置为10毫秒，球也会下降得很好。

请帮忙

对于在浏览器上平稳运行的动画，您应该真正使用requestAnimationFrame循环而不是setInterval

在此处签出示例：

原因如下：

我认为您应该使用

requestAnimationFrame

而不是

setInterval

示例

const canvas=document.querySelector（'#canvas'）；
const context=canvas.getContext（'2d'）；
常量图像=新图像（）；
image.src=”https://picsum.photos/seed/picsum/50/50";
image.addEventListener（“加载”，加载）；
函数加载（事件）{
loop（）；
}
设x=0；
设y=0；
设t=0；
设r=50；
const inc=Math.PI/90；
函数循环（）{
const width=canvas.width；
const height=canvas.height；
clearRect（0，0，宽度，高度）；
context.drawImage（image，x，y，image.width，image.height）；
x=100+r*Math.cos（t）；
y=100+r*Math.sin（t）；
t=t+inc；
请求动画帧（循环）；
}

我不会使用多个

setInterval

一个就可以…
以下是一个例子：

var paper=document.getElementById（'paper'）；
var brush=paper.getContext（'2d'）；
变量y=100；
无功转速=1；
函数绘图（）{
如果（（y<10）|（y>150））{
速度*=-1
}
y+=速度
clearRect（0,0,160,300）；
画笔。fillRect（10，y，10，10）；
}
函数播放（）{
设置间隔（抽签，10）；
}
draw（）

是的，他们应该这样做，但他们应该做对。在240Hz监视器上，动画的运行速度将比60Hz监视器快4倍。使用时间戳构建增量时间，以创建恒定的动画速度。

'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);
}