使帆布球平稳移动

Making a canvas ball move smoothly

本文关键字：移动 帆布      更新时间：2023-09-26

我写了一个多人乒乓球游戏，但由于~60ms的延迟，我的弹跳球移动不顺畅。游戏本身在这里可用，但由于它仅适用于 chrome，并且网站本身是用我的母语编写的（您显然需要两个浏览器才能工作），以下是问题的 jsfiddle：

http://jsfiddle.net/yc6Lb/75/

正如您在小提琴中看到的，定义了dx和dy，每秒刷新次数定义为 speed .我需要这三个变量保持不变（我知道它们导致球不平稳移动）。

现在的问题是：有什么技巧可以不碰到这些变量，而是让球看起来平稳移动？我正在考虑渲染球的新位置 + 以 50% 的不透明度渲染球的先前位置，但我还没有测试它。这个问题还有其他解决方案吗？

我认为

，正如@Jason所说，您可以在动画中拥有所需的精确步骤（例如使用animationFrame），并单独处理获取远程信息的问题。
但是，为了快速修复，您可以使用我有时使用的技巧：通过清除具有较低不透明度的 context2d 来获得尾迹/阴影效果。
所以 clear 函数变成： 

function clear() {
  cxt.globalAlpha=0.3;
  cxt.fillStyle='#FFFFFF';
  cxt.fillRect(0, 0, WIDTH, HEIGHT);
  cxt.globalAlpha=1;
}

然后你不能在 draw（） 函数中清除，并在绘制循环中调用 clear（）。

我更新了你的小提琴：

http://jsfiddle.net/gamealchemist/yc6Lb/86/

使用阿尔法来获得您想要的效果。

Rq ：您可能希望以完全不透明度清除屏幕的某些部分（如乐谱），并且仅在画布的动画部分使用较低的不透明度。

这

很丑陋，但这里有一个 FPS 参考给你：http://jsfiddle.net/yc6Lb/84/

特别是使用requestAnimationFrame()并具有FPS计数器。请注意性能差异:)

这是一个美丽的代码版本：http://jsfiddle.net/neuroflux/Ey9uz/1/
不客气！

您可以通过不在每个循环中执行 2*pi 计算来获得一点性能。将其舍入为静态值 6.28。

您可能还想查看处理.js，这可能会加快速度。

你的数学没有错。您应该使用 requestAnimationFrame。更改您的 init 函数，使其如下所示：

function init() {
  window.requestAnimationFrame(init, cxt)
  draw();  
}

这是一个有效的 JSFiddle 示例

您可能还需要 requestAnimationFrame 的 polyfill 才能让它在所有浏览器上运行。

相关文章：