相关疑难解决方法(0)

这是一个带有svg并将其变成画布的示例的小提琴:http://jsfiddle.net/Na6X5/944/

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

var svg = document.getElementById('mySVG');

var img = new Image();
img.onload = function() {
console.log(img.width, img.height)
document.getElementById('canvas1').width = 300
document.getElementById('canvas1').height = 200
ctx.drawImage(img, 0, 0, 300, 200);
}
img.src = "data:image/svg+xml," + encodeURIComponent(svg.outerHTML)

这适用于Chrome(51.0).但是在Firefox(47.0.1)上生成一个空白画布,没有错误.

此示例适用于Firefox http://codepen.io/keithwyland/pen/umova,但将图像的src更改为内联svg会产生上面列出的问题http://codepen.io/Ewhite613/pen/YWZoGy

我将假定这是某种兼容性问题。一切都可以在chrome中完美运行，但是在Firefox中，它<canvas>根本无法画任何东西。

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

编辑： 这是我制作的“测试”代码示例的保管箱链接，它更简单，1张图像，1个画布，1个div，相似（实际上是相同的）脚本，但仍无法在Firefox中使用，但可以在chrome中使用。如果您可以在那里解决问题，那么这也将得到解决。

更新：数组在下面，根据请求，它们是不同元素/坐标的简单输入。不过，我向您保证，数组本身没有问题，在chrome中一切正常。该函数中有关DrawImage（）方法的某些问题引起了我要说的问题。（数组下方的进一步说明）

images是<img>元素的（全局）id数组。

    var images = { …