画布填充矩形不起作用答案

【问题标题】：canvas fillRect not working画布填充矩形不起作用
【发布时间】：2018-03-15 16:45:16
【问题描述】：

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

整个画布都是绿色的，但它不应该发生。
画布上的网格应根据其单元格是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();

&lt;canvas id="canvas" width="400" height="400" style="border:1px solid black;"&gt;

【问题讨论】：

标签： javascript html5-canvas

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你错过了休息时间； switch 上的语句：

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

【讨论】：

感谢您的帮助:)

【解决方案3】：

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

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";
               ctx.fillRect(x*tileW, y*tileH, tileW, tileH);
               break;
            case1:
               ctx.fillStyle="#ccffcc";
               ctx.fillRect(x*tileW, y*tileH, tileW, tileH);
               break;
          }

        }
     }
}
draw_map();
</script>

</html>

在切换的情况下，您需要在 case 结束时使用 break; 语句渲染每个图块。

【讨论】：