HTML5 动画性能

Question

这个问题可能跑题了，但我想知道为什么下面的代码会在MacBook Pro 2013 Retina显示器上运行很多求解器，然后运行我的旧HP笔记本电脑。 我在两台设备上都使用Chrome浏览器。 我问这个问题的原因是因为我使用 HTML5 和 javaScript 开发了一个游戏，并且游戏在 Mac 上运行了很多求解器

有什么建议吗？

window.onload=function(){
var demo = document.getElementById('demo');
var ctx = demo.getContext('2d');

var animObjects = [];
animObjects.push(new anim(ctx, 0, 90, 80,80, 'yellow', 3, 3));
animObjects.push(new anim(ctx, 20, 90, 80,80, 'red', 4, 0));

loop();
var e = new MouseEvent(ctx);
demo.addEventListener('mousemove', e.clickReporter, false);
function MouseEvent(ctx){
 this.clickReporter = function(evt){
        var mousePos = getMousePos(demo, evt);
        var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
        console.log(message);
        writeMessage(demo, message);
}
function getMousePos(demo, evt) {
        var rect = demo.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
}
function writeMessage(demo, message) {
        ctx.clearRect(0, 0, demo.width, demo.height);
        ctx.font = '18pt Italic';
        ctx.fillStyle = 'black';
        ctx.fillText(message, 10, 25);
}
}
function loop() {   
//ctx.clearRect(0, 0, demo.width, demo.height);
for(var i = 0, ao; ao = animObjects[i]; i++) {
    ao.update();
}
requestAnimationFrame(loop);
}

function anim(ctx, x, y, XSize,YSize, color, dx, dy) {
var me = this;
this.x = x;
this.y = y;
this.XSize = XSize;
this.XSize = XSize;
this.color = color;
this.dx = dx;
this.dy = dy;
var bool = 0;
this.update = function() {
    ctx.clearRect(me.x, me.y, me.XSize, me.XSize);
    if (me.x < 0 || me.x > ctx.canvas.width-80){
        me.dx = -me.dx;
    }
    if (me.y < 0 || me.y > ctx.canvas.height-80){
        me.dy = -me.dy;
    }
    me.x += me.dx;
    me.y += me.dy;        
    render();
}
function render() {
    ctx.beginPath();
    ctx.rect(me.x, me.y, me.XSize, me.XSize);
    ctx.closePath();
    ctx.fillStyle = me.color;
    ctx.fill();
}
return this;
}
}

Answer 1

由于您的分辨率如此之高（由于Retina显示屏，我假设分辨率为3840x2400），因此可能会减慢动画，游戏等速度。

您不是唯一遇到此问题的人：

• CSS3 关键帧动画在视网膜显示屏上表现迟缓
• http://www.reddit.com/r/apple/comments/1ps904/
• https://discussions.apple.com/message/20947370#20947370
• http://productforums.google.com/forum/#!topic/chrome/n1eF-52M9AM

作为链接中的提示，apple.com，有人建议查看以下内容：http://www.reddit.com/r/apple/comments/vi9yf/set_your_retina_macbook_pros_resolution_to/

它允许您在本机高 DPI 和更常见的 1920x1200 之间切换。你可以尝试一下，看看会发生什么！希望这有帮助！