如何提高视网膜 ipad 上的画布性能？答案

【问题标题】：How to improve canvas performance on retina ipad?如何提高视网膜 ipad 上的画布性能？
【发布时间】：2013-03-20 04:24:16
【问题描述】：

我们正在尝试优化游戏，它在 ipad 2 上运行良好，但简单的精灵动画在视网膜 iPad 上运行非常缓慢。我们使用的是 Safari 浏览器。

我们正在使用 CSS 来扩展应用程序。起初，我们尝试使用 libcanvas 框架，但后来切换到纯 HTML5 画布。我们尝试应用 -webkit-transform: translate3d(0,0,0); hack，但一点运气都没有。我们正在使用 webkitRequestAnimationFrame 方法。

我们做drawImage系列：

ctx.drawImage(anim,
                        frame * widthFrame,
                        0,
                        widthFrame,
                        widthFrame,

                        devicePixelRatio * shape.x +0.5|0,
                        devicePixelRatio * shape.y +0.5|0,
                        devicePixelRatio * shape.width,
                        devicePixelRatio * shape.height);

紧随其后

window.webkitRequestAnimationFrame(draw,root)

测试用例： http://jsfiddle.net/LJRXb/7/高分辨率 http://jsfiddle.net/AsfcL/1/低分辨率

有什么想法可以提高性能吗？应用程序有什么问题吗？有没有更好的方法来执行精灵动画？感谢您的关注和专家建议。

【问题讨论】：

对于精灵动画，我个人将图像应用到 div 作为背景图像，并在一段时间后更改其背景位置（到下一帧）。我觉得这是实现这一目标的最轻松方式。
您可能想查看 HTML5 Rock 的 Canvas Performance Tutorial。还要检查this question 和this one。这两个问题都是关于 HTML5 画布的性能。

标签： javascript canvas html5-canvas retina-display

【解决方案1】：

我们正在使用 CSS 来扩展应用程序

我认为您的意思是您正在通过 CSS 设置画布 css 的宽度和高度？这会扼杀性能。您需要在画布本身上进行缩放，而不是缩放画布元素的 CSS 属性。像这样将画布设置为宽度/高度 100%：

<canvas id="myCanvas" width="100%" height="100%></canvas>

然后使用画布上下文 setScale() 进行相应的绘制，例如

var canvas = document.getElementById('myCanvas'),
    ctx = canvas.getContext('2d');

ctx.setScale(myScaleX, myScaleY);
...

【讨论】：

话虽如此，“视网膜”设备上的性能目前对于画布来说还是很糟糕的。
如果您投反对票，请提供理由。如果您认为某个答案的某些信息不正确，请提供见解。