Javascript HTML画布兼容性问题

我正在使用

元素用Html和Javascript构建一个游戏。 由于我需要水平翻转图像，因此与主画布不同，我创建了一个在翻转图像时不可见的次画布（以避免为另一个位置下载另一个图像） 然后我在主画布中绘制辅助画布的结果。 这种方法在Firefox27中没有任何问题，而在Chrome、Chrome mobile、Opera mobile和Firefox mobile中，由于未知的原因，它不起作用

辅助画布的代码如下所示：

var flip = function (image) {
'use strict';
var offscreenCanvas = document.createElement('canvas'),
    offscreenCtx = offscreenCanvas.getContext('2d');

offscreenCanvas.width = image.width;

offscreenCtx.translate(image.width, 0);
offscreenCtx.scale(-1, 1);
offscreenCtx.drawImage(image, 0, 0);
return offscreenCanvas;
};

以及在主体画布中绘制结果的代码：

var flippedCharImg = flip(charImg);
ctx.drawImage(flippedCharImg, character.xpos, character.ypos, character.stopped.width, character.stopped.height);

你知道为什么它不能在那些浏览器上工作，以及如何使它工作吗

---

对不起，语法错误

正如@Philipp所建议的，当我在尝试绘制图像之前确保图像已完全加载时，您的代码就可以工作

下面是一个图像加载程序，它完全加载所有图像，然后在start（）函数中调用您的代码：

// first load all your images

var imageURLs=[];  
var imagesOK=0;
var imgs=[];

// put the URLs to any images you need in the imageURLs[] array
imageURLs.push("yourCharImg.png");

loadAllImages(start);

function loadAllImages(callback){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                callback();
            }
        };
        img.onerror=function(){alert("image load failed");} 
        img.crossOrigin="anonymous";
        img.src = imageURLs[i];
    }      
}

// after all images are loaded, start using the images here

function start(){

    // the imgs[] array holds fully loaded images
    // the imgs[] are in the same order as imageURLs[]

    // get an image from the imgs[] array

    var charImg=imgs[0];  // or whatever image index you need

    // draw a flipped image

    var flippedCharImg = flip(charImg);
    ctx.drawImage(flippedCharImg, 
        character.xpos, character.ypos, 
        character.stopped.width, character.stopped.height
    );

}

//首先加载所有图像
var-imageurl=[]；
var-imagesOK=0；
var-imgs=[]；
//将URL放到imageURLs[]数组中所需的任何图像
push（“yourCharImg.png”）；
加载图像（开始）；
函数LoadAllImage（回调）{
for（var i=0；i=imageURL.length）{
回调（）；
}
};
img.onerror=function（）{alert（“映像加载失败”）；}
img.crossOrigin=“匿名”；
img.src=imageURL[i]；
}      
}
//加载所有图像后，开始使用此处的图像
函数start（）{
//imgs[]数组保存完全加载的图像
//imgs[]与ImageURL[]的顺序相同
//从imgs[]数组获取图像
var charImg=imgs[0]；//或您需要的任何图像索引
//画一个翻转的图像
var flippedCharImg=翻转（charImg）；
ctx.drawImage（flippedCharImg，
character.xpos，character.ypos，
character.stopped.width，character.stopped.height
);
}

您不需要两张画布。例如，在主画布和单个画布上绘制图像的左半部分，然后在右半部分上使用平移和翻转（=比例（-1,1））复制图像的左半部分。画布规范明确允许这样的复制。这对帧率非常有帮助（每帧0.5个屏幕拷贝，而每帧1.5个屏幕拷贝）。（你不必担心撕裂，画布的内部缓冲区只有在你停止绘制后才会被交换）。很有趣。您是否在上述移动浏览器中测试了建议的修复方案？@markE-Nope。但是每帧使用一半的内存和三分之一的字节拷贝应该会让事情变得更好（我想：-）你确定图像已经加载了吗？也许Firefox是从缓存加载的，所以图像立即可用，而其他浏览器需要时间加载，所以在绘制图像时它还不可用。@Philipp可能是这样，因为我尝试过从服务器加载图像，但第一次翻转的图像没有显示出来。然后，当我重新加载页面时，它正常工作了。@Philipp@markE-Perfect！谢谢在将一些变量移动到全局范围后，它工作得非常好。唯一的问题是一件奇怪的事情：出于某种原因，图像（具有as y位置值

canvas.height/2

）不是在画布的垂直中间绘制的，而是要高得多。它以前工作正常，我不知道发生了什么。无论如何，这是第二个问题，我可能很快就会解决它。