HTML5 Canvas - 이전에 그려진 사각형을 겹쳐서 만든 게임 레벨 그리기

Question

나는 지난 3 시간 동안이 문제를 해킹 해왔고 어디서 잘못되었는지 파악할 수 없습니다. 기본적으로, 나는 작은 게임을위한 타일 기반의 "레벨"을 그리려하고있다. 캔버스가 이미 이해하고있는 것처럼, 캔버스는 이미 그려져있는 사각형에 새로운 사각형을 그려야합니다.

기본적으로 배경을 그리는 기능과 그 위에 하이라이트를 그리는 또 다른 기능이 있도록 설정하고 싶습니다. "하이라이트"는 벽의 상단이고, 배경은 벽의 측면을 보여줍니다. 하이라이트는 맨 위에 그려야합니다. 이상적으로는 캐릭터 사이에 하이라이트가 그려지기 때문에 (배경이 벽 뒤에있는 것처럼) 배경이 캐릭터 뒤에 있기 때문에 결국에는 그 사이에 인물을 그리기를 원하기 때문입니다.

(하이라이트 층 제외) 수준의 배경과 형태는 다음과 같습니다 http://howtivity.com/leveldrawing 어떤 이유

, 나는 하이라이트 층을 끌기 위해 노력하고 많은 문제로 실행합니다. 3 차원 벽의 느낌을주기 위해 배경 레이어 위에 레이어 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

필자의 실수는 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; 

};