javascript - Canvas fillRect 不工作

Question

我有一个简单的js程序。
它为游戏创建基于图 block 的 map 。

整个 Canvas 都是绿色的，但这不应该发生。
Canvas 上的网格应根据其单元格是 0 还是 1

进行着色

var tileW = 40,
  tileH = 40;
var mapW = 10,
  mapH = 10;

var gameMap = [
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 1, 1, 1, 0, 1, 1, 1, 1, 0],
  [0, 1, 0, 0, 0, 1, 0, 0, 0, 0],
  [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
  [0, 1, 0, 1, 0, 0, 0, 1, 1, 0],
  [0, 1, 0, 1, 0, 0, 0, 1, 1, 0],
  [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
  [0, 1, 0, 0, 0, 0, 0, 1, 0, 0],
  [0, 1, 1, 1, 0, 1, 1, 1, 1, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

function draw_map() {
  for (var x = 0; x < mapW; x++) {
    for (var y = 0; y < mapH; y++) {
      switch (gameMap[y][x]) {
        case 0:
          ctx.fillStyle = "#999787";
        case 1:
          ctx.fillStyle = "#ccffcc";
      }
      ctx.fillRect(x * tileW, y * tileH, tileW, tileH); //->>?? this part is creating problem
    }
  }
}
draw_map();

<canvas id="canvas" width="400" height="400" style="border:1px solid black;">

Answer 1

您的 switch 语句中缺少 break，因此它从黑色变为绿色。试试这个。

      switch(gameMap[y][x]) {
        case 0:
           ctx.fillStyle="#999787";
           break;
        case 1:
           ctx.fillStyle="#ccffcc"; 
           break;
      }