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

您正在更新功能中重新加载导致延迟的图像：

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

您可以拥有两幅画布，每张图片一幅。当你想切换。移除或隐藏前面的那个，立即留下后面的那个。

根据您的评论，here是26个字母表中的一个示例。我们一次只保留两幅画布。每次用户点击时，只添加一个新的，并使隐藏的一个可见，没有延迟。

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

Src Canvas闪烁

2 个答案: