gleiche Rechteck trotz unterschiedlicher Arraywert gezeichnet

Question

Ich habe eine Kachel-Array, das wie so aussieht:

var gameCanvas = document.getElementById('canvas'); 
var ctx = gameCanvas.getContext("2d"); 

var mapArray = [ 
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
[1,1,0,0,0,0,0,0,0,0,1,2,0,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0], 
[1,1,1,1,0,0,0,0,0,0,1,2,2,2,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0], 
[1,1,1,1,1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,3,0,0,0] 
]; 

und eine Schleife, die von diesem Kartenkacheln auf die Leinwand zieht

var posX = 0; 
var posY = 0; 

for(i=0; i < mapArray.length; i++){ 
    for(j=0; j < mapArray[i].length; j++){ 
     if(mapArray[i][j] == 1){ 
      ctx.rect(posX, posY, 32, 32); 
      ctx.fillStyle="black"; 
     } 
     if(mapArray[i][j] == 2){ 
      ctx.rect(posX, posY, 32, 32); 
      ctx.fillStyle="red"; 
     } 
     if(mapArray[i][j] == 3){ 
      ctx.rect(posX, posY, 32, 32); 
      ctx.fillStyle="blue"; 
     } 
     ctx.fill(); 
     posX += 32;  
    } 
    posX = 0; 
    posY +=32; 
} 

Jedes ‚1‘ im Array wird wie erwartet als schwarzes Quadrat angezeigt. Das Problem ist, jede '2' und '3' werden auch als ein schwarzes Quadrat angezeigt, trotz der Deklaration einer anderen Farbe in der fillStyle dieser if-Anweisung.

Wenn protokolliert, gibt jede if-Anweisung den Wert (1,2 oder 3) wie erwartet zurück.

Answer 1

Sie könnten ctx.beginPath() und ctx.stroke() als Schachtelungsbefehle verwenden.

var gameCanvas = document.getElementById('canvas'), 
 
    ctx = gameCanvas.getContext("2d"), 
 
    mapArray = [[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [1,1,0,0,0,0,0,0,0,0,1,2,0,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0],[1,1,1,1,0,0,0,0,0,0,1,2,2,2,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0],[1,1,1,1,1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,3,0,0,0]], 
 
    posX = 0, 
 
    posY = 0, 
 
    i, j; 
 

 
for (i = 0; i < mapArray.length; i++){ 
 
    posX = 0; 
 
    for (j = 0; j < mapArray[i].length; j++) { 
 
     if (mapArray[i][j]) { 
 
      ctx.beginPath(); 
 
      ctx.rect(posX, posY, 32, 32); 
 
      ctx.fillStyle = ["black", "red", "blue"][mapArray[i][j] - 1]; 
 
      ctx.fill(); 
 
      ctx.stroke(); 
 
     } 
 
     posX += 32;  
 
    } 
 
    posY += 32; 
 
}

<canvas id="canvas" width="1000" height="1000"></canvas>