HTML5 Canvas 移动 TiledMap 背景

Question

首先，对不起我的英语:(

我对画布元素很感兴趣，我正在尝试制作一个游戏浏览器，但我无法解决这个问题。

1. 我得到二维数组中的地图图块。

2. 我得到位置播放器，我翻译上下文（将其绘制在画布的中心），然后考虑地图中的绝对位置重新绘制地图。但是当我移动播放器时，地图会在大约 1 秒后消失（我认为是 clearRect 画布）并且在地图出现之后。

所以，我的问题是这个令人讨厌的第二个画布是黑色的。

代码。

function pinta(){
    var mirror = renderToCanvas(canvas.width, canvas.height, function (ctx) {
    ctx.clearRect(0,0,canvas.width,canvas.height);

    //antes de pintar debemos calcular la traslacion
    ////////////////////////////////////////////////
        var moverX=canvas.width/2-players[yo].x;
        var moverY=canvas.height/2-players[yo].y;
        ctx.translate(moverX,moverY);
        pinta_terreno();
        pinta_players();

    function pinta_players()
    {
        for( var player in players ) {
            var i=player,
            x=players[i].x;
            y=players[i].y;
            var img=new Image(25,25);
            if(i==2)img.src="/img/player2.png";
            else img.src="/img/player1.png";
            ctx.drawImage(img,x,y);
        }
    }   

    function pinta_terreno()
    {
        // donde estoy en tiles
        var min_x=(-canvas.width+players[yo].x)/TAM_TILE;
        var max_x=(canvas.width+players[yo].x)/TAM_TILE;
        var min_y=(-canvas.width+players[yo].y)/TAM_TILE;
        var max_y=(canvas.width+players[yo].y)/TAM_TILE;
        ///////////////////////
            for(var i=min_x;i<=max_x;i++)
                    for(var j=min_y;j<=max_x;j++)
                    {
                            var x=i*TAM_TILE;
                            var y=j*TAM_TILE;

                            try
                            {
                                if(mapa[i][j]!=null && mapa[i][j]!="undefined")
                                {
                                    var terreno=new Image(25,25);
                                    terreno.src="/img/terrain/"+mapa[i][j]+".png";
                                    ctx.drawImage(terreno,x,y);
                                }
                            }catch(e)
                            {

                            }
                    } // del for(var j=0;j<(canvas.height/TAM_TILE);j++)

    } // del pintaterreno
}); 

context.clearRect(0,0,canvas.width,canvas.height);
context.drawImage(mirror, 0, 0);
}

Answer 1

我从来没有用画布做过动画（只有静态图），但我认为你应该回顾一些技巧（别担心，mi inglés tampoco es perfecto）。

• 首先要找出代码中导致 1seg 滞后的确切函数：在调用 ctx.clearRect() 之前和之后添加一个 console.log()。还有ctx.translate()、pinta_players() 和pinta_terreno() 之前和之后。最后一个是我的主要嫌疑人。
• 如果您正在绘制pinta_terreno() 内的整个可见区域，则不需要ctx.clearRect() 开头的mirror()。
• 您可能希望为两个播放器和标题预加载和存储图像（当然，这取决于标题的数量），因此此步骤不在您的绘制函数中完成。这样你应该有ctx.drawImage(player1,x,y); 而不是ctx.drawImage(img,x,y); 和ctx.drawImage(terreno[i,j],x,y); 而不是ctx.drawImage(terreno,x,y);。
• 还请注意，如果您在循环/计时器中调用 paint 函数，那么您将清除画布两次！
• 这是我不明白的部分：您是否将函数传递给context.drawImage() 函数？ drawImage 的第一个参数应该是图像、视频、画布或其他上下文。