0

一开始，对不起我的英语:(

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

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

1 回答 1

0

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

  • 首先是在代码中找出导致 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应该是图像、视频、画布或其他上下文。
于 2012-12-08T17:15:57.773 回答