0

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

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

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

出于某种原因，我在尝试绘制高光层时遇到了很多麻烦。我想将背景图层上方的图层偏移 50 像素，以给人一种三维墙的印象，并且我希望没有墙的任何空白空间都是透明的，因此背景仍然显示。当我尝试使用几乎相同的功能绘制图层时，唯一的区别是将图层向上偏移 50px 并将无墙填充样式设置为透明，它看起来像这样： 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();

任何帮助将非常感激！谢谢！

4

2 回答 2

2

我承认对您在完成的设计中想要什么感到有些困惑。

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

};
于 2013-04-29T01:29:28.487 回答
0

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

我输入了它们，就好像它们是：

fillRect(startX, startY, endX, endY);

实际上它们是：

fillRect(startx, starty, width, height);

于 2013-04-30T03:26:34.223 回答