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類背景

回答

相關問題