使用html / Javascript渲染大型钢琴

Question

我正在使用新的网络音频API处理html5音频应用程序，我需要的是一个“钢琴”，一个键盘网格，用户可以在大多数音乐制作软件中使用笔记，我正在考虑两种创造方式。

1. 创建一个大型html表并在单元格内创建标签以绘制注释
   • PRO 注释操作很简单，因为我们正在使用html元素，可以使用他们的事件和方法。
   • CON 我使用巨大的表做了一些项目，而且我的经验浏览器在处理那么多元素时往往会变慢。
2. 创建画布以渲染网格和注释
   • PRO 与具有智能缓存的大型表格相比，呈现速度更快
   • CON 需要更多努力才能进行音符操作。
   • CON 仍在滚动巨幅图片。

我需要使用最资源友好的方法，因为音频的渲染不应受慢响应界面的影响，用户应该能够在钢琴内部滚动而不会出现任何故障。

我可以创建一个具有视口大小的画布，并在用户滚动时让它渲染，我不知道这是否会更快，有一个较小的画布但它需要重新渲染更多。 对于表格，我可以使用固定单元格，其中注释被放入（addChild，innerHTML），但是它们不会有任何平滑的滚动，因为它只能按网格大小滚动（如果它是一个非常大的问题）足够快），并且还需要比静态表更多的重新渲染。

是否有一些我忽视的问题以及哪种解决方案对资源最友好？

Answer 1

由于你提到的两个原因，我不会在这里触摸表格，而且黑巧克力很好地嵌入也是hacky。

我倾向于画布，因为它非常快，你的资源使用是固定的：只是钢琴卷的像素。钢琴键也是矩形的，因此拾取逻辑不会太糟糕。

但是，如果您确实希望将键作为具有事件的对象，那么，正如abesto所提到的，矢量图形是可行的方法。 d3.js mbostock.github.com/d3/是一个很好的基于DOM的可视化JS库，可以帮助创建滚动，为键分配事件，以及平滑地动画滚动。您可以使用它来呈现HTML（例如DIV）或SVG。