Question

过去三个小时我一直在捣乱这个问题，无法弄清楚我哪里出错了。基本上，我正在尝试为一个小游戏绘制基于图块的“级别”。据我了解，画布应在已经绘制的矩形上绘制新的矩形。

我想设置它，以便有一个基本上绘制背景的函数，以及另一个在其上绘制高光的函数。 “亮点”是墙的顶部，背景显示了它的侧面。我想在顶部绘制亮点，因为理想情况下我最终想要在它们之间绘制一个角色，因此高光将位于角色的顶部（就好像它在墙后），而背景将在角色后面。

关卡的背景和形状（没有高光层）如下所示：http://howtivity.com/leveldrawing

出于某种原因，我在尝试绘制高光层时遇到了很多麻烦。我想在背景层上方偏移50px的层以给出三维墙的印象，并且我想要任何没有墙的空白区域，因此背景仍然显示。当我尝试使用几乎相同的函数绘制图层时，其唯一的区别是向上偏移图层50px并将无墙fillStyle设置为透明，它看起来像这样：http://howtivity.com/leveldrawing/highlight.html

我已将其设置为打印文本，以便我可以诊断它可能出错的地方，但文本已正确显示。我觉得我要么误解了画布是如何绘制的，要么是出现了一些我没有看到的错误。

<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();

任何帮助都会非常感激！谢谢！

Answer 1

我承认在你完成的设计中对你想要的东西感到有点困惑。

你想让你的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;

};

Answer 2

我的错误在于fillRect所需的值。

我输入的内容好像是：

fillRect(startX, startY, endX, endY);

实际上他们是：

fillRect(startx, starty, width, height);

HTML5 Canvas - 绘制游戏关卡，重叠以前绘制的矩形

2 个答案: