我正在使用新的网络音频 api 开发一个 html5 音频应用程序，我需要的是一个“pianoroll”，一个键盘网格，用户可以在其中绘制大多数音乐制作软件中使用的音符，我在想创建它的两种方法。
- 创建一个大型 html 表格并在单元格内创建标签以绘制注释
- PRO 笔记操作很容易，因为我们使用的是 html 元素并且可以使用它们的事件和方法。
- CON 我做了一些使用大表的项目，我的经验是浏览器在处理那么多元素时往往会变慢。
- 创建一个 Canvas 来渲染网格和注释
- PRO 如果与具有一些智能缓存的巨大表格相比，渲染速度会更快
- CON 需要更多努力才能使音符操作起作用。
- CON 仍在滚动巨大的图像。
我需要使用对资源最友好的方法，因为音频的呈现不应受到响应缓慢的界面的影响，用户应该能够在钢琴卷轴内滚动而不会出现任何故障。
我可以创建一个具有视口(viewport)大小的 Canvas ，并在用户滚动时让它呈现，我不知道这是否会更快， Canvas 较小但需要重新呈现更多。 对于表格，我可以使用固定的单元格，在必须显示它们时将注释放入其中(addChild，innerHTML)但是不会有任何平滑的滚动，因为它只能按网格大小滚动(如果它是不是一个真正的大问题足够快)，并且还需要比静态表更多的重新渲染。
我是否忽略了什么，哪种解决方案对资源最友好？
最佳答案
出于您提到的两个原因，我不会在此处触摸表格，而且将黑键很好地嵌入也很麻烦。
我倾向于 Canvas ，因为它非常快，而且您的资源使用是固定的:只是钢琴卷帘的像素。钢琴键也是矩形的，因此弹奏逻辑不会太糟糕。
但是，如果您确实更喜欢将键作为具有事件的对象，那么正如 abesto 提到的那样，矢量图形是可行的方法。 d3.js mbostock.github.com/d3/是一个很好的 JS 库，用于基于 DOM 的可视化，可以帮助创建滚动、为键分配事件以及平滑地动画滚动。您可以使用它来呈现 HTML(比如 DIV)或 SVG。
关于javascript - 使用 html/Javascript 渲染大型钢琴卷，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9745110/