尽管不同的阵列价值

得出相同的矩形我有一个小块阵列，它看起来像这样：尽管不同的阵列价值

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] 
];

以及能够吸引瓷砖到画布上从地图

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

每一个“1”的循环在阵列中显示为一个黑色的正方形。问题是，尽管在if语句的fillStyle中声明了不同的颜色，但“2”和“3”也显示为黑色方块。

记录时，每个if语句按预期返回值（1,2或3）。

来源

2016-09-07 bashlo_

您可以使用ctx.beginPath()和ctx.stroke()作为嵌套命令。

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>

来源

2016-09-07 21:20:45

因此，使用beginPath方法来单独的rects，否则会被认为是相同的形状的一部分。很高兴知道。谢谢，这很有帮助。 –

尽管不同的阵列价值

回答

相关问题