html5 <canvas>帧速率

Question

我正在考虑使用javascript制作游戏逻辑游戏,并使用HTML5画布元素为游戏设置动画.我的目标是编写适用于浏览器和新智能手机的东西.所以我写了一个快速程序,在屏幕上移动100个圆圈,并向我显示帧速率.我对结果非常失望:Chrome:~90 FPS Firefox:~25 FPS iPhone:~11 FPS

这是一个非常简单的测试,所以我不喜欢实际制作完整游戏的机会.这是canvas元素的标准结果还是有一些技巧可以让绘图更快,如果你有任何好的链接让我知道？帆布在这一点上只是一个玩具,还是可以用于现实世界的应用.

编辑这里是代码:

var ctx;
var width;
var height;
var delta;
var lastTime;
var frames;
var totalTime;
var updateTime;
var updateFrames;
var creats = new Array();

function init() {
    var canvas =document.getElementById('main');
    width = canvas.width;
    height = canvas.height; 
    ctx = canvas.getContext('2d');
    for(var i=0; i < 100; ++i) {
        addCreature();
    }
    lastTime = (new Date()).getTime();
    frames = 0;
    totalTime = 0;
    updateTime = 0;
    updateFrames =0;
    setInterval(update, 10);
}


function addCreature() {
    var c = new Creature(Math.random()*100,Math.random()*200);
    creats.push(c);
}

function update() {
    var now = (new Date()).getTime();
    delta = now-lastTime;
    lastTime = now;
    totalTime+=delta;
    frames++;
    updateTime+=delta;
    updateFrames++;
    if(updateTime > 1000) {
        document.getElementById('fps').innerHTML = "FPS AVG: " + (1000*frames/totalTime) + " CUR: " + (1000*updateFrames/updateTime);
        updateTime = 0;
        updateFrames =0;
    }

    for(var i=0; i < creats.length; ++i) {
        creats[i].move();
    }

    draw();
}

function draw() {
    ctx.clearRect(0,0,width,height);
    creats.forEach(drawCreat);
}

function drawCreat(c,i,a) {
    if (!onScreen(c)) {
        return;
    }
    ctx.fillStyle = "#00A308";
    ctx.beginPath();
    ctx.arc(c.x, c.y, 10, 0, Math.PI*2, true); 
    ctx.closePath();
    ctx.fill();
}

function onScreen(o) {
    return o.x >= 0 && o.y >= 0 && o.x <= width && o.y <=height;
}

function Creature(x1,y) {
    this.x = x1;
    this.y = y;

    this.dx = Math.random()*2;
    this.dy = Math.random()*2;

    this.move = function() {
        this.x+=this.dx;
        this.y+=this.dy;
        if(this.x < 0 || this.x > width) {
            this.dx*=-1;
        }
        if(this.y < 0 || this.y > height) {
            this.dy*=-1;
        }
    }

}

init();

Answer 1

为了使动画效率更高,并使帧速率与UI更新同步,Mozilla创建了一个mozRequestAnimationFrame()函数,旨在消除setTimeout()和setInterval()的低效率.此技术后来仅被Webkit用于Chrome.

在2011年2月,Paul Irish发布了一个创建requestAnimFrame()的垫片,不久之后,Joe Lambert通过恢复"超时"和"间隔"延迟来延长它以减缓动画节拍.

无论如何,我已经使用过两者,并且在Chrome和Firefox中看到了非常好的结果.如果支持requestAnimationFrame()不可用,则垫片也会回退到setTimeout().Paul和Joe的代码都在github上在线.

希望这可以帮助!

Answer 2

它在很大程度上依赖于JavaScript引擎.V8(Chrome)和Carakan(Opera)可能是生产质量最快的两款发动机.TraceMonkey(火狐)和SquirrelFish(Safari)远远落后,KJS带来了后方.随着硬件加速进入主流,这将发生变化.

至于具体的优化,我们可能必须看到一些代码.请记住,画布支持合成,因此您实际上只需要重绘已更改的区域.也许您应该在没有画布的情况下重新运行基准测试,以便了解绘图操作是否真的是限制因素.

如果你想看看现在可以做些什么,请查看:
js1k
Bespin
Canvas-stein

Answer 3

Chrome 是迄今为止我见过的唯一一个具有高帧率结果的浏览器。

您可能还想尝试 IE9 的最新预览版。这应该为您提供下一代浏览器（具有 HTML5 硬件加速功能）如何处理您的代码的一个不错的基准。

到目前为止，我已经看到 IE9、Chrome 7 和 Firefox 4 都将支持某种形式的硬件加速。