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渲染的问题。

祝你好运。