Arrays HTML5画布——绘制游戏级别，重叠先前绘制的矩形

在过去的三个小时里，我一直在努力解决这个问题，不知道哪里出了问题。基本上，我正在尝试为一个小游戏绘制一个基于平铺的“关卡”。据我所知，画布应该在已经绘制的矩形上绘制新的矩形

我想对它进行设置，这样有一个函数基本上可以绘制背景，另一个函数可以在上面绘制高光。“高光”是墙的顶部，背景显示墙的侧面。我希望在顶部绘制高光，因为理想情况下，我最终希望在它们之间绘制一个角色，这样高光将位于角色顶部（好像在墙后面），而背景将位于角色后面

标高的背景和形状（不含高光层）如下所示：

由于某些原因，我在绘制高光层时遇到了很多麻烦。我想在背景层上方偏移50px层，给人一个三维墙的印象，我希望没有墙的任何空白区域都是透明的，这样背景仍然可以显示出来。当我尝试使用几乎相同的函数绘制图层时，其唯一区别是向上偏移图层50px，并将“无墙填充样式”设置为“透明”，如下所示：

我已经将其设置为打印文本，这样我就可以诊断错误的位置，但文本显示正确。我觉得我要么误解了画布是如何绘制的，要么犯了一些我看不到的错误

<canvas height="600" width="1000" style="position: absolute; z-index: 0; background: transparent;" id="background">
</canvas>

<script>
var level =
[
[1,1,1,1,1,1,1,1,1,1],
[1,0,0,0,0,0,0,1,0,0],
[1,0,1,0,1,1,0,1,0,1],
[0,0,0,0,0,1,0,0,0,1],
[1,0,0,0,0,0,0,1,1,1],
[1,1,1,1,1,1,1,1,1,1]
];

var bg = document.getElementById("background");
var bgContext = bg.getContext("2d");

var drawLevel = function() {
var levelDrawX = 0;
var levelDrawY = 0;

for (levelRow = 0; levelRow < 6; levelRow++) 
{   
  for (levelCol = 0; levelCol < 10; levelCol++) 
  {
    levelDrawX = (100 * levelCol); 
    if (level[levelRow][levelCol]==1) 
    {
        bgContext.fillStyle = "#ffe680";
        bgContext.fillRect(levelDrawX, levelDrawY, levelDrawX + 100, levelDrawY + 100);
    } else {
        bgContext.fillStyle = "#8dd35f";
        bgContext.fillRect(levelDrawX, levelDrawY, levelDrawX + 100, levelDrawY + 100);
    }

  }
levelDrawY += 100;
}
};

var drawHighlights = function() {
var levelDrawX = 0;
var levelDrawY = 0;

for (levelRow = 0; levelRow < 6; levelRow++) 
{   
  for (levelCol = 0; levelCol < 10; levelCol++) 
  {
    levelDrawX = (100 * levelCol); 
    if (level[levelRow][levelCol]==1) 
    {
        bgContext.fillStyle = "#000";
    } else {
        bgContext.fillStyle = "transparent";
    }
    bgContext.fillRect(levelDrawX, levelDrawY-50, levelDrawX+100, levelDrawY+50);

  }
levelDrawY += 100;
}
};


drawLevel();
drawHighlights();

风险值水平=
[
[1,1,1,1,1,1,1,1,1,1],
[1,0,0,0,0,0,0,1,0,0],
[1,0,1,0,1,1,0,1,0,1],
[0,0,0,0,0,1,0,0,0,1],
[1,0,0,0,0,0,0,1,1,1],
[1,1,1,1,1,1,1,1,1,1]
];
var bg=document.getElementById（“背景”）；
var bgContext=bg.getContext（“2d”）；
var drawLevel=函数（）{
var-levelDrawX=0；
var-levelDrawY=0；
对于（levelRow=0；levelRow<6；levelRow++）
{   
用于（levelCol=0；levelCol<10；levelCol++）
{
levelDrawX=（100*levelCol）；
如果（级别[levelRow][levelCol]==1）
{
bgContext.fillStyle=“#ffe680”；
bgContext.fillRect（levelDrawX、levelDrawY、levelDrawX+100、levelDrawY+100）；
}否则{
bgContext.fillStyle=“#8dd35f”；
bgContext.fillRect（levelDrawX、levelDrawY、levelDrawX+100、levelDrawY+100）；
}
}
levelDrawY+=100；
}
};
var drawHighlights=函数（）{
var-levelDrawX=0；
var-levelDrawY=0；
对于（levelRow=0；levelRow<6；levelRow++）
{   
用于（levelCol=0；levelCol<10；levelCol++）
{
levelDrawX=（100*levelCol）；
如果（级别[levelRow][levelCol]==1）
{
bgContext.fillStyle=“#000”；
}否则{
bgContext.fillStyle=“透明”；
}
bgContext.fillRect（levelDrawX，levelDrawY-50，levelDrawX+100，levelDrawY+50）；
}
levelDrawY+=100；
}
};
drawLevel（）；
Drawhights（）；

---

任何帮助都将不胜感激！谢谢大家!

我承认我对你想要的成品设计有点困惑

是否希望drawHighlights（）向drawLevel（）添加半透明的“阴影”

如果是这样，可以通过设置上下文的globalAlpha（不透明度级别）来实现

var drawHighlights = function() {

    var levelDrawX = 0;
    var levelDrawY = 0;

    bgContext.globalAlpha=0.8;

    for (levelRow = 0; levelRow < 6; levelRow++) 
    {   
      for (levelCol = 0; levelCol < 10; levelCol++) 
      {
        levelDrawX = (100 * levelCol); 
        if (level[levelRow][levelCol]==1) 
        {
            bgContext.fillStyle = "#777";
        } else {
            bgContext.fillStyle = "transparent";
        }
        //bgContext.fillText(levelCol, levelCol*100, 10+levelRow*100);
        bgContext.fillRect(levelDrawX, levelDrawY-50, levelDrawX+100, levelDrawY+50);

      }
      levelDrawY += 100;
    }

    bgContext.globalAlpha=1.0;

};

var drawHighlights=function（）{
var-levelDrawX=0；
var-levelDrawY=0；
bgContext.globalAlpha=0.8；
对于（levelRow=0；levelRow<6；levelRow++）
{   
用于（levelCol=0；levelCol<10；levelCol++）
{
levelDrawX=（100*levelCol）；
如果（级别[levelRow][levelCol]==1）
{
bgContext.fillStyle=“#777”；
}否则{
bgContext.fillStyle=“透明”；
}
//bgContext.fillText（levelCol，levelCol*100，10+levelRow*100）；
bgContext.fillRect（levelDrawX，levelDrawY-50，levelDrawX+100，levelDrawY+50）；
}
levelDrawY+=100；
}
bgContext.globalAlpha=1.0；
};

我的错误在于fillRect所需的值

我把它们打得好像是：

fillRect（startX、startY、endX、endY）

实际上是：

fillRect（开始、开始、宽度、高度）
谢谢！没错。。。我会把它固定在这个例子上。但是，我仍然很难让这两个画正确。当drawHighlights中的颜色设置为“透明”时，它将停止在级别[2][2]上绘制透明空间。我将上传一个工作演示。再次感谢，很抱歉我没有解释清楚。不，我不想添加半透明阴影。基本上我想画背景，然后在上面覆盖另一层“高光”。如果从上面看，高光将是墙的顶部，背景将是墙的侧面。我想偏移阴影顶部上方50px的高光，使其产生三维错觉。我将稍微修改演示以按原样显示背景：在那里的背景之上，我想绘制相同的黄色形状，除了较浅的黄色阴影，并向上偏移50px（“高光”）。标记E，添加代码（与键入的完全相同，以替换我原来的drawHighlights（）因为透明矩形说明了这个问题：--它应该在阴影中绘制与背景相同的形状，对吗？但出于某种原因，它没有。当它到达[2][2]时会挂起，并且只从那里绘制灰色。我能够让它正确绘制高光形状的唯一方法是用实际颜色替换else中的“透明”值。然后，它正确地绘制了水平形状，但显然与绿色应该位于的背景重叠，如下所示：-当它越来越靠近右下角时，它似乎进行多次传递的方式也很奇怪。我不明白为什么它会画同一个矩形多次，因为它越来越深入