Firefox 上的 Canvas Draw Image 问题，在 chrome 中运行良好 [英] Canvas Draw Image issue on firefox, works well in chrome

查看：20
本文介绍了Firefox 上的 Canvas Draw Image 问题，在 chrome 中运行良好的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我认为这是某种兼容性问题.在 chrome 中一切正常，但在 Firefox 中 根本不绘制任何东西.

I will assume this is some sort of compatibility issue. Everything works perfectly in chrome, but in firefox the <canvas> simply doesn't draw anything.

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 中工作.如果你能在那里解决这个问题，那么这个问题也将得到解决.

here is dropbox link for "test" code-sample that I made, much simpler, 1 image, 1 canvas, 1 div, similar (practically same) script, that is still not working in firefox, yet works in chrome. If you can solve the issue there, then this will be solved as well.

更新: 数组如下，根据请求，它们是不同元素/坐标的简单输入.不过我向你保证，阵列本身没有问题，在 chrome 中一切正常.函数中的 DrawImage() 方法导致了我要说的问题.(数组下面的进一步解释)

UPDATE: Arrays are below, per request, they are simple imput of different elements/coordinates. I assure you though, there is no issue within the arrays themselves, everything works nice in chrome. Something about the DrawImage() method from the function is causing the problem I'd say. (further explanation below the arrays)

images 是 元素的(全局)id 数组.

images is a (global) array of ids for the <img> elements. 

    var images = {
    stage1: ["character1Base", "character2Base", "character3Base", "character4Base", "character5Base", "character6Base", "character3BotImg"],
    stage2: ["character1Sit", "character2Base", "character3Base", "character4Base", "character5Base", "character6Base", "character3BotImg"],
    stage3: ["character1Sit", "character2Drink", "character3Base", "character4Base", "character5Base", "character6Base", "character3BotImg"],
    stage4: ["character1Sit", "character2Drink", "character3Base", "character4Base", "character5Base", "character6Doll", "character3BotImg"],
    stage5: ["character1Sit", "character2Drink", "character3Eat", "character4Base", "character5Base", "character6Doll", "character3EatBot"],
    stage6: ["character1Sit", "character2Stand", "character3Eat", "character4Base", "character5Base", "character6Doll", "character3EatBot"],
    stage7: ["character1Sit", "character2Stand", "character3Eat", "character4Sit", "character5Base", "character6Doll", "character3EatBot"],
    stage8: ["character1Sit", "character2Stand", "character3Eat", "character4Sit", "character5Sit", "character6Doll", "character3EatBot"],
    stage9: ["character1Sit", "character2Eat", "character3Eat", "character4Sit", "character5Sit", "character6Doll", "character3EatBot"],
    stage10: ["character1Drink", "character2Eat", "character3Eat", "character4Sit", "character5Sit", "character6Doll", "character3EatBot"]
};

imageDimensions 是井、维度、posX、posY、sizeX & 的(全局)数组.尺寸Y.

imageDimensions is a (global) array of 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 是函数采用的唯一参数决定了将要绘制的内容.

Explanation: The function is meant to draw on screen in different elements, characters that belong to these elements. They are drawn in canvas (will later be animated in canvas as well). The stageNum which is the only parameter the function takes determines what will be drawn.

有人知道是什么问题吗?(我读过一些类似的帖子，但所有的问题都是鼠标位置的 layerX、layerY，但是我在这里根本没有使用 mouseover/mousein/mouseout，仍然没有绘制元素.

Anyone know what the problem is? (I've read a few similar posts but issue in all of them was layerX, layerY of the mouse position, however I am not using mouseover / mousein / mouseout here at all, still elements are not drawn.

推荐答案

您的问题是您尝试绘制的图像是 svg 图像，并且这些 svg 文档具有相对的 width 和 height 属性.

Your problem is that the image your are trying to draw are svg images, and that these svg documents have relative width and height attributes.

浏览器无法为其必须绘制的图像设置高度或宽度，因此无法将其渲染到画布上.(它可以在文档中进行估算，因为它可以与某物相关，但不能在画布中).

The browser can't set a height nor a width to the image it has to draw, and hence it can't render it to the canvas. (It is able to do an estimation in the document, since it can be relative to something, but not in the canvas).

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

So the solution is to set absolute width and height attributes in your svg files,

或者，更复杂的是，首先将其绘制到