Firefox 中离屏画布的性能问题

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 倍是非常令人惊讶的（因此是“可能”）。