HTML5 Canvas - 视网膜显示器上纵向和横向的性能差异

标签 html web-applications canvas retina-display ipad-3

我们正在使用一种缩放技术来提高我们的 Canvas 网络应用程序在视网膜显示器上的分辨率。基本上,此处描述的技术:

http://zsprawl.com/iOS/2012/03/html5-canvas-and-retina-displays/

但是,我们注意到在横向模式与纵向模式下运行时存在显着的性能差异。我已经设置了一个 jsFiddle 测试应用程序来演示这一点。如果您查看嵌入式版本,您会注意到不同之处:

http://jsfiddle.net/SaJ69/embedded/result/

(删除/embedded/result/将带你到原来的 fiddle 。我只能有一个包含 2 个链接的帖子)

如果您在 iPad3 上查看时在纵向和横向之间切换(您需要在切换之间刷新浏览器窗口),您会发现纵向模式比横向模式更不稳定。在我自己的网络服务器上运行它时(不是通过 jsFiddle),结果更加明显。

我尝试做一些帧速率指标,但它们只测量我们进行绘制调用的次数,而不是浏览器实际更新的次数。

有人对此有任何见解吗?这是硬件相关的问题吗?我们在理论上执行相同的绘制调用并填充相同数量的像素,对吗?

-克里斯

最佳答案

似乎一种可行的解决方法是将 Canvas 宽度限制为 1023,这样双密度 Canvas 的宽度为 2046 像素;由 Arima 发现并在此处解释: http://www.scirra.com/forum/retina-ios-performance-problem-fix-please-test_topic58742.html

关于HTML5 Canvas - 视网膜显示器上纵向和横向的性能差异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11651304/

相关文章:

javascript - HTML5 将加密的视频帧绘制到 Canvas (使用 clearkey 的加密媒体扩展)

css - HTML5 iframe 相对大小

html - 为什么显示: inline; not working in my navigation with css?

javascript - HTML5 Socket.IO 在 C++ 中可用吗?

java - 将 Springboot 部署到 Azure 应用服务

javascript - 我想要在 Canvas 中画一个虚线 ctx.fillText (".",500,400)

html - 我怎样才能使底部堆叠上下文中的元素保持在另一个更高堆叠上下文的前面?

javascript - Dart 和第三方 CSS 和 JS 框架

javascript - 单页 JavaScript 应用程序的漏洞/安全扫描器

javascript - 如何使用 JavaScript 从图像区域获取 RGB 数据