멀티 레이어 캔버스 HTML5

Question

여러 레이어로 구성된 타일 기반 게임을 프로그래밍하고 있습니다. 그러나지도를 그리고 CSS를 통해 캔버스의 크기를 조정하려고하면 상단 레이어의 타일이 의도하지 않은 테두리를 얻는다는 사실을 경험하게됩니다. 타일 그리기위한 코드는 다음과 같습니다

코드가 basicly 타일 두 종류로 구성, 무작위지도를 만드는 무엇

for (var key in Nodes) { 
     var currentNode = Nodes[key]; 
     var tileProb = Math.floor(Math.random() * 10 + 1); 

     if (tileProb < 2) { 
      currentNode.passable = false; 
      canvasLayerZero.drawImage(currentNode.img, 0, 0, tileDim, tileDim, currentNode.x * tileDim, currentNode.y * tileDim, tileDim, tileDim); 
     } 
     else { 
      currentNode.passable = true; 
      canvasLayerOne.drawImage(currentNode.img, 20, 0, tileDim, tileDim, currentNode.x * tileDim, currentNode.y * tileDim, tileDim, tileDim); 
     }; 
    }; 

: 바위와 잔디. 바위 타일은 낮은 캔버스와 위쪽 타일에있는 잔디 타일에 그려져 있습니다. 그려야 할 타일이 암석 일 때, 패시브 프로퍼티를 false로 설정합니다. 내 문제는 이미 언급했듯이 CSS를 사용하여 확대/축소 할 때 위의 타일에 테두리가 생기는 것입니다. 같은 캔버스에 모든 것을 그려 넣으면 그런 일은 일어나지 않습니다. 하지만 벽 뒤에 "걸을"수 있도록 여러 캔버스가 필요합니다.

누군가 제거 방법을 설명해 주시겠습니까?

미리 감사드립니다.

Answer 1

이는 서브 픽셀 효과 때문입니다.

기본값은 픽셀이 반 픽셀 오프셋으로 그려 지므로 CSS로 캔버스 크기를 조절하면 이미지의 크기를 조정할 때이 서브 픽셀 효과가 더 잘 보입니다.

당신이 CSS를 사용해야하는 경우가 타일을 그리기 전에 캔버스를 번역하는 시도 할 수 있습니다

:

ctx.translate(-0.5, -0.5); 

은 일반적으로는 CSS를 사용하여 캔버스를 확장 할 수있는 좋은 생각이 아니다 있습니다. 대신 컨텍스트 메서드 scale()이 타일을 그리기 전에 타일을 도우거나 크기를 조정할 수 있는지 확인하십시오 (속도가 중요하면 새 크기로 캐시하십시오).