HTML5画布上移动TiledMap类背景

我在与画布元素的乐趣，我试图让一个gamebrowser，但我解决不了这个问题。

我得到了地图图块的二维数组。
我得到的位置的球员，我翻译的情况下（将它绘制在画布的中心），然后我绘制地图考虑的绝对位置地图，但是当我移动播放器时，地图会消失大约1秒arRect画布我认为）和地图出现后。

所以，我的问题是这个烦人的第二个画布在黑色。

代码。

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

来源

2012-12-07 user1886506

这可以帮助我，我想... http://batiste.dosimple.ch/blog/2011-06-27-1/ – user1886506

我从来没有做过与画布（仅限静态图）动画，但我认为有一些秘诀，你应该检查（不要担心，MI英语tampoco ES PERFECTO）。

第一件事是发现代码中的确切功能，这是造成了1SEG滞后：前后调用ctx.clearRect()后添加console.log()。还有ctx.translate(),pinta_players()和pinta_terreno()之前和之后。最后一个是我的主要嫌疑人。
如果您在pinta_terreno()内绘制整个可见区域，则在mirror()开头的ctx.clearRect()不是必需的。
您可能需要预先加载并存储两位玩家和游戏的图像（当然取决于多少游戏），所以这一步不是在绘画功能中完成的。这样你应该有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-08 17:15:57 Roimer

HTML5画布上移动TiledMap类背景

回答

相关问题