Src帆布闪烁

Question

我正在努力弄清楚如何在画布上切换图像，而不会在两者之间出现一小部分空白。

在这里我要指出的就是一个极端的例子。在这个程序中，当你的空格键按下时，它会每毫秒重绘图像circle.png。因为这是如此之快，图像消失了。

我确实试过预装我的照片，但没什么用。

这是我的完整代码：

// Access Canvas
var canvas = document.getElementById("gameBoard");
var ctx = canvas.getContext("2d");


// preload image
var circleReady = false;
var circleImage = new Image();
circleImage.onload = function () {
    circleReady = true;
};
circleImage.src = "images/Circle.png";



// Game objects
var circle = {
};

// circle location
circle.x = canvas.width / 2;
circle.y = canvas.height / 2;

// Keyboard events
var keysDown = {};

addEventListener("keydown", function (e) {
    keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function (e) {
    delete keysDown[e.keyCode];
}, false);



// Update Objects

var update = function () {
    if (32 in keysDown) { // Player space pressed
        circleImage.src = "images/Circle.png"; //re-draws image
    }
};

// Draws Everything
var render = function () {
    ctx.fillStyle = "#FFFFFF";
    ctx.fillRect(0,0,600,609);

    if (circleReady) {
        ctx.drawImage(circleImage, circle.x, circle.y);
    }
};

// The main loop
var main = function () {
    update();
    render();

};

// Starts Function
var then = Date.now();
setInterval(main, 1); // Execute as fast as possible

Answer 1

您将在update函数中重新加载图像，这将导致延迟：

circleImage.src = "images/Circle.png"; //re-draws image

您所要做的就是在不重新加载映像的情况下进行drawImage：

ctx.drawImage(circleImage, circle.x, circle.y);

下面是一个图像加载器的示例，它在开始执行之前加载所有映像：

    var imageURLs=[];  // put the paths to your images here
    var imagesOK=0;
    var imgs=[];
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house1.jpg");
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house2.jpg");
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house3.jpg");
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house4.jpg");
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house5.jpg");
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house6.jpg");
    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];
        }      
    }

    function start(){
        // all your images are fully loaded so begin your app
    }

Answer 2

你可以有两张画布，每幅画一张。当你想转换的时候。移除或隐藏在前面的，留下(立即)在后面的那个。

根据你的评论，这里是26个字母的例子。我们一次只留两张画布。每次用户单击whe只添加一个新的，并使隐藏的一个可见，没有任何延迟。

function createCanvas(letter) {
    var canvas = document.createElement('canvas');
    canvas.id = letter;
    canvas.style.display = 'none';
    document.getElementById('container').appendChild(canvas);

    var image = new Image();
    image.src = 'http://icons.iconarchive.com/icons/iconicon/alpha-magnets/128/Letter-'+letter+'-icon.png';
    image.onload = function() {
      canvas.getContext('2d').drawImage(this, 0, 0);
    };

    return canvas;
}

createCanvas('a').style.display = '';
createCanvas('b');
var prevCharCode = 'a'.charCodeAt(0);
var charCode = 'b'.charCodeAt(0);

document.addEventListener('click', function() {
    document.getElementById(String.fromCharCode(charCode)).style.display = '';
    document.getElementById('container').removeChild(
        document.getElementById(String.fromCharCode(prevCharCode))
    );
    prevCharCode = charCode;
    if(++charCode > 'z'.charCodeAt(0)) {
      charCode = 'a'.charCodeAt(0);
    }
    createCanvas(String.fromCharCode(charCode));
});