javascript - Firefox 在使用 Canvas 时抛出错误 0x80004005

Question

当我在 Firefox 上使用 Canvas 时，有时会出现类似这样的错误:

Error: uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMCanvasRenderingContext2D.lineWidth]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: media/js/canvas/Rectangle.js :: :: line 34" data: no]

当我在 for 循环中处理超过 5 个 Canvas 元素时，就会发生这种情况。创建它们的函数是这样的:

function addCanvas(id) {
var canvas = document.getElementById(id);

if (canvas == null) {
    $('#content').append(
        '<canvas id="' + id + '" width="' + workAreaWidth +'" height="' 
            + workAreaHeight + '"></canvas>'
    );

    canvas = document.getElementById(id).getContext('2d');
} else {
    canvas = canvas.getContext('2d');
    canvas.setTransform(1, 0, 0, 1, 0, 0);
    canvas.clearRect(0, 0, workAreaWidth, workAreaHeight);
}   

return canvas;
}

for 循环在另一个函数中。

发生的情况是并非所有 Canvas 元素都已更新。我猜是异常的原因。

我无法发布它确切失败的地方的代码，因为它在很多地方随机失败，总是出现相同的错误。

Firefox版本是9.0，也发生在8.0.1上。我没有在以前的版本上测试它。我的操作系统是 Mac Snow Leopard。我想这会有所帮助。它不会在 Chrome 或 Safari 上失败，

感谢您的帮助。

Answer 1

这些错误消息会让外行人感到困惑，但其中包含大量信息。重要的部分是:

Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMCanvasRenderingContext2D.lineWidth]

忽略十六进制数:这告诉您访问器 nsIDOMRenderingContext2D.lineWidth 返回了通用失败代码 (NS_ERROR_FAILURE) 而不是线宽。 nsIDOMRenderingContext2D 是 C++ 类的内部名称，该类实现您从 Canvas 元素上的 getContext("2d") 获取的对象。

location: "JS frame :: media/js/canvas/Rectangle.js :: :: line 34"

从 JavaScript 调用失败的 C++ 方法位于 media/js/canvas/Rectangle.js 的第 34 行。那是你的代码。然而，不是，您引用的代码，但也许我们可以通过查看失败访问器的代码来找出问题所在:http://mxr.mozilla.org/mozilla-central/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#3180

nsresult
nsCanvasRenderingContext2D::GetLineWidth(float *width)
{
    if (!EnsureSurface())
        return NS_ERROR_FAILURE;

    gfxFloat d = mThebes->CurrentLineWidth();
    *width = static_cast<float>(d);
    return NS_OK;
}

好的，所以唯一可能失败的方法是 EnsureSurface 失败。 那 定义在http://mxr.mozilla.org/mozilla-central/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#1154我不会在这里引用它，因为它很大并且有很多失败的方法。但是，在我看来，您的 Canvas 元素之一要么未正确定义，要么没有机会自行初始化(即您需要允许事件循环运行)。

编辑:具体建议:将你引用的函数改成这样:

function addCanvas(id, continuation) {
    if (document.getElementById(id) === null) {
        $('#content').append(
            '<canvas id="' + id + '" width="' + workAreaWidth +'" height="' 
            + workAreaHeight + '"></canvas>'
        );
    }

    setTimeout(function() {
        var canvas = document.getElementById(id).getContext('2d');
        canvas.setTransform(1, 0, 0, 1, 0, 0);
        canvas.clearRect(0, 0, workAreaWidth, workAreaHeight);
        continuation(canvas);
    }, 0);
}

您还需要更改所有来电者以匹配。我不保证这会奏效，但这是我能想到的最合理的事情。