2

我们正在尝试优化游戏，它在 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/低分辨率

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

4

1 回答 1

-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);
...
于 2013-05-09T20:47:09.027 回答