Question

我正在使用<canvas>元素在Html和Javascript中构建游戏。因为我需要水平翻转图像，所以在主画布上，我创建了一个次要的，用于翻转图像是不可见的（以避免为另一个位置下载另一个图像）然后我在主要画布中绘制辅助画布的结果。这种方法在Firefox 27中没有任何问题，而在Chrome，Chrome移动版，Opera移动版和Firefox移动版中，原因不明。

辅助画布的代码如下：

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

知道为什么它不适用于那些浏览器以及如何使其工作？

对不起语法！

Answer 1

正如@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
    );

}

HTML画布兼容性问题

1 个答案: