Question

我遇到了以下问题，我相信我必须做些蠢事，但我找不到。（这是在Firefox 8中）

我正在拍摄一个大的精灵文件，制作一个新的小画布来保存该精灵的一个磁贴，然后使用drawImage的最基本重载来绘制这个孤立的瓷砖在我的“屏幕”画布中的数百个地方。

我这样做而不是简单地使用drawImage的最后一个重载，它只占用一个较大的精灵文件。通过避免这种削波，在Chrome中，我的性能提升了大约10％，令我惊讶。但是，在Firefox中，帧速率从300 FPS下降到17 FPS。

所以，我所看到的实际上是“从图像到画布”的绘制速度比在Firefox中从“画布到画布”绘制快20倍。

这是对的吗？我没有找到关于这个特例的任何信息，但这是我在测试中看到的。

此外，这是我正在使用的代码。我做了什么令人难以置信的愚蠢行为吗？

function Test5() {
    var imgSprite = $('imgSprite');
    var tileCanvas = document.createElement("canvas");
    tileCanvas.width = 64; tileCanvas.height = 31;
    var tileCtx = tileCanvas.getContext("2d");
    tileCtx.drawImage(imgSprite, 0, 0, 64, 31, 0, 0, 64, 31);

    //--------------------------------------
    var ctx = getContext('mainScreen');

    ctx.fillStyle = '#fff';

    time(function() { // time will run this function many times and time it
        ctx.fillRect(0,0, 1200,900);
        var x=0, y=0, row = 0;
        for (var i=1; i < 1000; i++) {
            ctx.drawImage(tileCanvas, x,y); // <-- this is the line I care about
            // some simple code to calculate new x/y
        }
    }, 1000, "Test5", 'Drawing from an individual tile canvas, instead of a section of big sprite');
}

如果，而不是

 ctx.drawImage(tileCanvas, x,y);

我做：

 ctx.drawImage(imgSprite, 0, 0, 64, 31, x, y, 64, 31);

快20倍

我在这里错过了什么吗？

编辑：在问了这个之后，我为自己做了一个小页面，在不同的平台上测试了几个不同的东西，看看每种方法中最好的做法是什么。

http://www.crystalgears.com/isoengine/jstests3-canvas.html

我很抱歉代码非常丑陋，这是一个快速的黑客攻击，不值得其他人看到，甚至在几天内也不会被我看到。

Answer 1

很难确定没有分析（尤其是您的特定图像，也许是您的特定显卡+驱动程序），但您可能正在点击https://bugzilla.mozilla.org/show_bug.cgi?id=705559

当然，bug应该导致带有<canvas>参数的drawImage有点慢;虽然减速20倍是非常令人惊讶的（因此“可能”）。

Firefox中的屏幕外画布的性能问题

1 个答案: