用于滚动窗格的HTML 5 Canvas vs Divs

Sea*_*ess 1 html javascript html5 canvas

我正在制作电视指南.有关使用Canvas的示例实现,请参见http://i.tv/guide.

我需要制作很多代表每个节目的小盒子.我需要能够在垂直(通道)和水平(时间)上滚动它们.为了使用Canvas,我的理解是实现滚动的唯一方法是拦截正确的事件,并使用新的偏移量平滑地重绘画布每秒多次.

如果我要使用div,我可以在它上面滚动滚动条并让它正常滚动.我可以将它们定位一次,让滚动移动它们,而不是重新计算它们的新偏移量.

我应该选择哪种项目?如果我使用divs会太慢吗?一些阵容有500个频道.我想一次显示最多4个小时.

谢谢!

bob*_*nce 6

对于交互式元素,我强烈建议使用普通HTML而不是画布.除了速度问题(div通常比自己手动绘制更快),HTML旨在免费提供可访问性和可用性功能,你必须做很多工作才能从画布中获得部分功能.

链接的基于画布的指南具有以下缺点:

  • 对我而言渲染/滚动速度很慢;
  • 不受键盘导航的影响;
  • 没有HTML链接操作(如中键单击链接到新打开选项卡或右键单击书签);
  • 文字不可复制/可上传;
  • 屏幕阅读器等辅助工具的死亡;
  • 降低浏览器兼容性
  • 对搜索引擎不可见.

使用canvas可以获得使用纯HTML无法实现的漂亮的图形和交互效果.说实话,我甚至没有在i.tv的网站上看到任何内容; 我不知道为什么他们以这种看似疯狂的方式实现它.