Javascript firefox上的画布绘制图像问题，在chrome上运行良好

我假设这是某种兼容性问题。 在chrome中，一切都能完美运行，但在firefox中，

根本无法绘制任何内容

function drawStage(stageNum) {
    var cap = canvasArray.length; //keeps the canvasElements
    var i;
    var stageImages = images["stage" + stageNum];
    var stageDimensions = imageDimensions["stage" + stageNum];
    //console.log("Cap is: " + cap);


    for (i = 0; i < cap; i++) {
        var canvas = document.getElementById(canvasArray[i]);
        var canvasContext = canvas.getContext("2d");
        var image = document.getElementById(stageImages[i]);

        canvasContext.clearRect(0, 0, 1280, 1280);
        canvasContext.drawImage(image, stageDimensions[i][0], stageDimensions[i][1], stageDimensions[i][2], stageDimensions[i][3]);
        //document.getElementById(zIndexes[i][0]).style["z-index"] = zIndexes[i][stageNum];
        //console.log(document.getElementById(zIndexes[i][0]).id);
    }
}

imageDimensions是well、dimensions、posX、posY、sizeX和sizeY的（全局）数组

    var imageDimensions = {
    stage1: [[0, 0, 233, 485], [0, 0, 153, 407], [20, 0, 220, 200], [0, 150, 505, 210], [0, 0, 315, 391], [0, 0, 480, 435], [1, 0, 220, 180]],
    stage2: [[105, 35, 180, 440], [0, 0, 153, 407], [20, 0, 220, 200], [0, 150, 505, 210], [0, 0, 315, 391], [0, 0, 480, 435], [1, 0, 220, 180]],
    stage3: [[105, 35, 180, 440], [0, 0, 153, 407], [20, 0, 220, 200], [0, 150, 505, 210], [0, 0, 315, 391], [0, 0, 480, 435], [1, 0, 220, 180]],
    stage4: [[105, 35, 180, 440], [0, 0, 153, 407], [20, 0, 220, 200], [0, 150, 505, 210], [0, 0, 315, 391], [0, 0, 480, 435], [1, 0, 220, 180]],
    stage5: [[105, 35, 180, 440], [0, 0, 153, 407], [3, 7, 226, 180], [0, 150, 505, 210], [0, 0, 315, 391], [0, 0, 480, 435], [1, 9, 220, 180]],
    stage6: [[105, 35, 180, 440], [0, 0, 172, 490], [3, 7, 226, 180], [0, 150, 505, 210], [0, 0, 315, 391], [0, 0, 480, 435], [1, 9, 220, 180]],
    stage7: [[105, 35, 180, 440], [0, 0, 172, 490], [3, 7, 226, 180], [70, 0, 341, 380], [0, 0, 315, 391], [0, 0, 480, 435], [1, 9, 220, 180]],
    stage8: [[105, 35, 180, 440], [0, 0, 172, 490], [3, 7, 226, 180], [70, 0, 341, 380], [18, 72, 305, 422], [0, 0, 480, 435], [1, 9, 220, 180]],
    stage9: [[105, 35, 180, 440], [0, 0, 173, 473], [3, 7, 226, 180], [70, 0, 341, 380], [18, 72, 305, 422], [0, 0, 480, 435], [1, 9, 220, 180]],
    stage10: [[105, 32, 162, 440], [0, 0, 173, 473], [3, 7, 226, 180], [70, 0, 341, 380], [18, 72, 305, 422], [0, 0, 480, 435], [1, 9, 220, 180]]
};

说明： 该功能旨在以不同的元素在屏幕上绘制， 属于这些元素的字符。它们是用帆布画的 （稍后也将在画布中设置动画）。

stageNum

是 函数采用的唯一参数确定将绘制的内容

---

有人知道问题出在哪里吗？（我读过一些类似的帖子，但其中的问题都是layerX，鼠标位置的分层，但我这里根本没有使用mouseover/mousein/mouseout，仍然没有绘制元素。

您的问题是，您试图绘制的图像是svg图像，这些svg文档具有相对的

宽度和
高度t
属性

浏览器无法为必须绘制的图像设置高度或宽度，因此无法将其渲染到画布上（它可以在文档中进行估计，因为它可以相对于某个对象，但不能在画布中）

因此，解决方案是在svg文件中设置绝对
width
和
height
属性

或者，更复杂的是，首先将其绘制到
或
中，然后绘制一个序列化版本，您可以在其中设置这些属性

function initialize() {
    var canvas = document.getElementById("char1Canvas");
    var canvasContext = canvas.getContext("2d");
    var image = document.getElementById("char1Img");
    resizeSVG(image, function(e){
        canvasContext.clearRect(0, 0, 1280, 1280);
        canvasContext.drawImage(this, 0, 0);
    });
};

var resizeSVG = function(svgImg, callback){
    // create an iframe
    var iframe = document.createElement('iframe');
    // so we don't see it
    iframe.height = 0;
    iframe.width = 0;
    iframe.onload = function(){
        var doc = iframe.contentDocument;
        var svg = doc.querySelector('svg');
        // get the computed width and height of your img element
        // should probably be tweaked
        var bbox = svgImg.getBoundingClientRect();
        // if it's a relative width
        if (svg.width.baseVal.unitType !== 1) {
            svg.setAttribute('width', bbox.width);
        }
        // or a relative height
        if (svg.height.baseVal.unitType !== 1) {
            svg.setAttribute('height', bbox.height);
        }
        // serialize our updated svg
        var svgData = (new XMLSerializer()).serializeToString(svg);
        var svgURL = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgData);
        // create a new Image Object that ill be draw on the canvas
        var img = new Image();
        img.onload = callback;
        img.src = svgURL;
        // remove the iframe
        document.body.removeChild(iframe);
    };
    iframe.src = svgImg.src;
    document.body.appendChild(iframe);
}

你能提供你正在传递的数组和相关的HTML吗？当然，我会马上将它们添加到主帖子中，对不起，是afk的晚餐。我不记得了，你是说你使用了
窗口。onload
开始吗？如果你没有，那么图像可能没有加载。同时尝试放置
If（canvas==null）
和
如果（图像===null）
以确保
getElementById
正在查找您要查找的元素。我确实使用了window.onload启动，但此后我将其更改为5秒后加载，以避免此类错误。图像已加载，100%加载，因为我已将它们的引用放在文档中，并且我可以看到它们在那里，所以它们不会被绘制在画布上（我把它们一个叠在另一个上面放在一边，以确保它们被加载）。根据警报/consol.log，我正在获取div，只是因为某些原因绘图不起作用。我在firefox（开发者版45.0a2（2016-01-08））上使用了
ctx.drawImage（document.getElementById（“imageID”），0,0）
它工作正常。因此，这一定与页面有关，因为我看不出您的代码有任何错误。感谢您的详细回答。我使用您的代码运行，在
var doc=iframe.contentDocument；
line上出现错误，如下所示：>未捕获安全性错误：未能从“htmliframe”读取“contentDocument”属性lement'：阻止源代码为“null”的帧访问源代码为“null”的帧。协议、域和端口必须匹配。但是将绝对值放入.svg文件中使其工作。奇怪的是，chrome知道如何根据
标记中的值计算它们，而firefox不知道如何添加（上面缺少字符空格），我试着用一个具有宽度/高度的
标记包围
，因为svg设置为100%100%，但这也不起作用，它必须在svg中手动编辑。对我来说，这是一个可接受的解决方案，因为我在绘图时将使用静态大小，但看看如何使用建议的函数可能是值得的很遗憾，如果一个SVG要以不同的大小多次使用，它必须是多个SVG图像。是的，要访问iframe，您可能必须在服务器上使用它。我认为在file://system上它会失败。例如，用这个块替换script.js中的代码，它应该可以工作（在服务器上）将在我再次访问服务器后重试，home atm。感谢所有帮助！我的
元素有
width=“100%”height=“100%”
。你知道Firefox（仅）要求这些元素存在并更改为绝对数字，真是个天才！
function initialize() {
    var canvas = document.getElementById("char1Canvas");
    var canvasContext = canvas.getContext("2d");
    var image = document.getElementById("char1Img");
    resizeSVG(image, function(e){
        canvasContext.clearRect(0, 0, 1280, 1280);
        canvasContext.drawImage(this, 0, 0);
    });
};

var resizeSVG = function(svgImg, callback){
    // create an iframe
    var iframe = document.createElement('iframe');
    // so we don't see it
    iframe.height = 0;
    iframe.width = 0;
    iframe.onload = function(){
        var doc = iframe.contentDocument;
        var svg = doc.querySelector('svg');
        // get the computed width and height of your img element
        // should probably be tweaked
        var bbox = svgImg.getBoundingClientRect();
        // if it's a relative width
        if (svg.width.baseVal.unitType !== 1) {
            svg.setAttribute('width', bbox.width);
        }
        // or a relative height
        if (svg.height.baseVal.unitType !== 1) {
            svg.setAttribute('height', bbox.height);
        }
        // serialize our updated svg
        var svgData = (new XMLSerializer()).serializeToString(svg);
        var svgURL = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgData);
        // create a new Image Object that ill be draw on the canvas
        var img = new Image();
        img.onload = callback;
        img.src = svgURL;
        // remove the iframe
        document.body.removeChild(iframe);
    };
    iframe.src = svgImg.src;
    document.body.appendChild(iframe);
}