我会假设这是某种兼容性问题。
一切都在 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);
}
}
编辑: here是我制作的“测试”代码示例的保管箱链接,更简单,1 个图像,1 个 Canvas ,1 个 div,类似(实际上相同)脚本,在 Firefox 中仍然不起作用,但在 chrome 中起作用。如果您可以在那里解决问题,那么这也将得到解决。
更新:数组在下面,根据请求,它们是不同元素/坐标的简单输入。不过我向你保证,数组本身没有问题,一切都在 chrome 中运行良好。函数中的 DrawImage() 方法导致了我要说的问题。 (数组下方的进一步说明)
images 是
<img>
的(全局)ID 数组元素。 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 和 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]]
};
解释:
该功能旨在以不同的元素在屏幕上绘制,
属于这些元素的字符。它们是在 Canvas 上绘制的
(稍后也将在 Canvas 中进行动画处理)。
stageNum
这是该函数采用的唯一参数决定了要绘制的内容。
有谁知道问题是什么? (我读过一些类似的帖子,但所有的问题都是鼠标位置的 layerX,layerY,但是我根本没有在这里使用 mouseover/mousein/mouseout,仍然没有绘制元素。
最佳答案
您的问题是您尝试绘制的图像是 svg 图像,并且这些 svg 文档具有相对的 width
和 height
属性。
浏览器无法为其必须绘制的图像设置高度或宽度,因此无法将其渲染到 Canvas 上。 (它能够在文档中进行估计,因为它可以相对于某些东西,但不能在 Canvas 中)。
所以解决方法是设置绝对width
和 height
svg 文件中的属性,
或者,更复杂的是,首先将其绘制成 <iframe>
或 <object>
,然后绘制一个序列化版本,您将在其中设置这些属性。
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);
}
关于javascript - Firefox 上的 Canvas Draw Image 问题,在 chrome 中运行良好,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34706891/