HTML5畫布 - 繪圖遊戲關卡，重疊以前繪製的矩形

Question

我已經劈砍而去，在這個問題在過去的三個小時，不能找出哪裏出了問題。基本上，我試圖爲小遊戲繪製一個基於瓦片的「級別」。據我瞭解，畫布應在已繪製的矩形上繪製新的矩形。

我想要設置它以便有一個基本繪製背景的函數，另一個函數會在其上繪製高光。 「亮點」是牆的頂部，背景顯示了它的一面。我想在上面畫出高光，因爲理想情況下我最終希望在它們之間繪製一個角色，這樣高光會在角色頂部（就好像它在牆後），而背景則在角色背後。

水平（無亮點層）的背景和形狀看起來像這樣：http://howtivity.com/leveldrawing

出於某種原因，我遇到了很多的努力得出的亮點層麻煩。我想要偏移背景圖層上方50px的圖層以給出三維牆的印象，並且我希望任何沒有牆的透明空間以便背景仍然顯示。當我試着使用幾乎相同的功能，其唯一的區別是向上偏移層50像素繪製層，並設置無牆的填充樣式，以透明的，它看起來像這樣：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

我的錯誤是fillRect所需的值。

我輸入了他們，好像他們是：

fillRect(startX, startY, endX, endY);

而實際上它們是：

fillRect(startx, starty, width, height);

Answer 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; 

};