Question

起初，对不起我的英语:(

我正在玩canvas元素，我正在尝试制作一个游戏浏览器，但我无法解决这个问题。

我得到二维数组中的地图图块。
我得到了位置播放器，我翻译了上下文（在画布的中心绘制），然后考虑到地图中的绝对位置重绘地图。但是当我移动播放器时，地图会消失大约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

我从未使用画布（仅限静态图形）制作动画，但我认为您应该检查一些提示（并且不要担心，这些都是完美的）。

首先要发现引起1seg延迟的代码中的确切函数：在调用console.log()之前和之后添加ctx.clearRect()。以及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的第一个参数应该是图像，视频，画布或其他上下文。

HTML5 Canvas移动TiledMap背景

1 个答案: