javascript - Canvas 越大，移动越慢

Question

使用这段代码:

x = x + (canvas.height/250);

每 1 毫秒发生一次，应该按 Canvas 大小的比例向 x 添加一个量。然后绘制 x 因此 x 应该在不同的屏幕尺寸上以相同的速度向下移动 Canvas ( Canvas 根据屏幕尺寸改变大小)。然而，x 在我的 ipod 和我的电脑上以不同的速度向下移动。

如果您想知道完整的源代码和 html 文件，html 是 here并且链接到它的 javascript 文件是 here .

Answer 1

首先，让我们考虑一下这一行的作用:

x += canvas.height / 250;

物体的速度是canvas.height/250。距离是 canvas.height。我们可以这样说:

distance = speed * time

我们已经有了距离和速度，所以:

time = distance / speed = canvas.height / (canvas.height / 250) = 250 ms

所以物体总是在 2.5 秒内到达目的地。为了实现这一点，您可以根据屏幕尺寸更改速度。

如果您希望所有设备的速度都相同，则不应依赖于 canvas.height。