HTML 5 Canvas vs Divs滾動窗格​​

Question

我正在製作電視指南。有關使用Canvas的示例實現，請參閱http://i.tv/guide。

我需要製作很多代表每場演出的小方塊。我需要能夠垂直（通道）和水平（時間）滾動。爲了使用Canvas，我的理解是，實現滾動的唯一方法是截取正確的事件，並平滑地重新繪製畫布，每秒多次新的偏移。

如果我要使用div，我可以對它滾動滾動條並讓它正常滾動。我可以將它們定位一次，讓滾動將它們移動，而不是重新計算它們的新偏移量。

我應該選擇哪種類型的項目？如果我使用div，它會太慢嗎？一些陣容有500個頻道。我想一次顯示長達4小時。

謝謝！

Answer 1

我強烈建議使用純HTML優先於畫布，用於交互式元素。除了速度問題（divs通常會比自己手動繪製更快），HTML旨在提供免費的可訪問性和可用性功能，您必須執行大量工作才能從畫布獲得部分內容。

爲鏈接的基於畫布引導有以下缺點：

• 渲染/滾動，對我來說非常慢;
• 不受鍵盤導航的影響;
• 沒有HTML鏈接操作（如中間點擊鏈接打開新標籤或右鍵單擊書籤）;
• 文本不能複製/粘貼;
• 無障礙工具如屏幕閱讀器的死亡損失;
• 降低瀏覽器兼容性;
• 搜索引擎不可見。

使用畫布進行漂亮的圖形和交互式效果，這是純HTML無法實現的。說實話，我甚至沒有在i.tv的網站上看到這些;我不知道他們爲什麼以這種看似瘋狂的方式實現它。

Answer 2

這樣做與DIV的不會有速度問題。瀏覽器渲染引擎用於渲染元素。 DOM渲染在很多情況下比畫布渲染更快，他們使用基於DOM的渲染來呈現數千個元素來製作遊戲。您應該基於技術能力來實現它。這兩種技術將能夠做到你想要的。我個人會選擇畫布，但我沒有看到DOM渲染的問題。

祝你好運。