Firefox 在使用画布时抛出错误 0x80004005

Question

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

错误：未捕获的异常：[Exception...“组件返回失败 代码：0x80004005（NS_ERROR_FAILURE） [nsIDOMCanvasRenderingContext2D.lineWidth]" nsresult: "0x80004005 （NS_ERROR_FAILURE）”位置：“JS框架:: media/js/canvas/Rectangle.js :: :: line 34" data: no]

当我在 for 循环中使用超过 5 个画布元素时会发生这种情况。创建它们的函数是这样的：

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 循环在另一个函数中。

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

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

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

感谢您的帮助。

Answer 1

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

组件返回失败代码：0x80004005 (NS_ERROR_FAILURE) [nsIDOMCanvasRenderingContext2D.lineWidth]

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

位置：“JS 框架 :: media/js/canvas/Rectangle.js :: :: 第 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 中定义，我不会在这里引用它，因为它很大并且有很多可能失败的方式。但是，在我看来，您的某个画布元素要么未正确定义，要么没有机会进行自我初始化（即您需要允许事件循环运行）。

编辑：具体建议：将您引用的函数更改为：

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);
}

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