HTML canvas 中的帧率（"Color Piano" 应用程序）

Question

我想制作一个带有“piano roll”的网页，这是一个粗略的可视化（没有一些计划的自定义）：

基于 Color Piano 可能会有希望，因为它允许上传 MIDI 文件并流畅地播放音频。

但是，Color Piano 无法在视觉上平滑地移动钢琴卷帘。条形图每帧走的距离不一样，and/or帧率低，and/or帧时长不一致。如果仔细观察 the original page (might depend on your hardware) or in videos.

就会发现

有些钢琴卷应用运行使用 canvas 更流畅（在相同的硬件上），例如 Piano Roll from Chrome Music Lab。（但他们不直接允许 select 自己的 MIDI 文件。）

为什么Color Piano不流畅？它是否可以通过修复一些错误轻松挽救，或者它是否深深地基于一些过时的技术？

Answer 1

不分析出处就不能肯定地说

但是，通过分析您可能会注意到它并不是一个非常密集的应用程序：

所以我在我的文本编辑器中打开了 min/app.js 文件，经过一些粗略的搜索，我注意到它确实尝试填充 requestAnimationFrame:

window.requestAnimationFrame || (window.requestAnimationFrame = function () { return window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (b, a) { window.setTimeout(b, 1E3 / 60) } }());

但是，搜索不会导致 requestAnimationFrame 的任何其他出现，所以我猜他们正在使用 setTimeout 或 setInterval 作为渲染循环，即 .

因此，最直接的“修复”是用 requestAnimationFrame 替换非专用计时器，并使用回调中提供的时间戳来驱动动画。

这并不意味着它是仅非同步绘图的出现，但是，这肯定是一个好的开始。

HTML canvas 中的帧率（"Color Piano" 应用程序）

Framerate in HTML canvas ("Color Piano" app)

javascript

html5-canvas

html2canvas