用html / javascript渲染大型鋼琴

Question

我正在使用新的網絡音頻api開發html5音頻應用程序，為此，我需要一個“鋼琴卷”，一個鍵盤網格，用戶可以在其中繪制大多數音樂制作軟件中使用的音符，我在想兩種方法創建這個。

1. 創建一個大的html表並在單元格內創建標簽以繪制注釋
   • PRO注釋操作很容易，因為我們正在使用html元素，並且可以使用它們的事件和方法。
   • CON我做了一些使用大表的項目，而我的經驗瀏覽器在處理那么多元素時往往會變慢。
2. 創建畫布以渲染網格和注釋
   • 與具有智能緩存的大型表格相比， PRO的渲染速度可能更快
   • CON將需要更多的精力來使音符處理工作。
   • CON仍在滾動巨大的圖像。

我需要使用最資源友好的方法，因為音頻的渲染不應受到響應速度慢的界面的影響，用戶應該能夠在鋼琴卷軸中滾動而不會出現任何故障。

我可以創建一個具有視口大小的畫布，並在用戶滾動時讓其呈現，我不知道這樣做是否會更快，有一個較小的畫布，但是需要重新渲染。 對於表，我可以使用固定的單元格，在這些單元格中必須顯示注釋時將其放入（addChild，innerHTML），但不會進行任何平滑滾動，因為它只能按網格大小滾動（如果它是足夠快），並且還需要比靜態表更多的重新渲染。

我有什么被忽略的，哪種解決方案最節省資源？

Answer 1

由於您提到的兩個原因，我都不會在這里碰到桌子，而且很好地插入黑鍵也很棘手。

我傾向於畫布，因為它的速度非常快並且您的資源使用情況是固定的：僅鋼琴卷的像素。 鋼琴鍵也是矩形的，因此拾音邏輯不會太差。

但是，如果您確實希望將鍵作為具有事件的對象，那么就象abesto所提到的那樣，矢量圖形是可行的方法。 d3.js mbostock.github.com/d3/是一個不錯的JS庫，用於基於DOM的可視化，可以幫助創建滾動，將事件分配給鍵以及使滾動動畫流暢。 您可以使用它來呈現HTML（例如DIV）或SVG。