크기가 조정 된 캔버스 요소의 좌표

Question

검색 엔진을 이미 사용했지만 원하는 정보를 얻지 못해서 누군가가 자신이 만든 좌표계를 사용하는 데 좋은 방법/트릭을 가지고 있는지 물어보고 싶습니다. HTML5 canvas 요소.

나는과 같이, 전체 브라우저 창에 적응해야 캔버스 요소를 사용하여 HTML5의 2D 게임을 개발하고자 :

<canvas style="width: 100%; height: 100%;"> 
    No support for your browser, unfortunately... 
</canvas> 

문제는 나는 내가 관리하는 방법을 모르겠입니다 내 게임의 좌표. 내 게임에서 플레이어 예. 사용자가 오른쪽 화살표 키를 누르면 오른쪽으로 32 픽셀 이동하지만 캔버스 요소의 크기를 조정하면 어떻게됩니까? 논리적으로 게임의 "블록"도 크기가 변경되므로 좌표 단위가 더 이상 픽셀이되지 않습니다.

내가 사용할 수있는 다른 장치가 있습니까? 아니면 내가 무엇을 제안하겠습니까?

Answer 1

설정 캔버스의 너비와 높이가 영역 크기를

<canvas id="mycanvas" width="400" height="300"/> 

을 게임 화면에서 원하는 화면 크기로 그 스타일을 설정하는 속성.

#mycanvas { 
    width: 100% 
    height: 100% 
    display: block 
} 

이제 캔버스가 400x300이고 드로잉이 실제 실제 픽셀 크기를 화면에서 무시한다고 가정 할 수 있습니다.

게임 좌표의 실제 위치와 일치하도록 마우스 클릭을 조정해야합니다. 그래서 (x, y)에서 캔버스를 마우스로 클릭하면 x = (x/$ ('# mycanvas'). width()) * 400과 y만큼 게임 좌표에서 위치를 얻습니다. 캔버스가 전체 화면이 아닌 경우 클릭 좌표에 대한 델타 값을 가져 오려면 $ ('# mycanvas'). offset()을 사용하십시오.

Answer 2

캔버스에 CSS 크기 조정 기능을 사용 해본 적이 없으므로 매우 추악합니다.

쓴 것은 캔버스의 너비를 페이지의 폭으로 만들지 않으므로 너비가 300 픽셀, 세로가 150 픽셀 (기본값)이되도록 만들고 페이지의 너비와 높이가 될 때까지 조정합니다.

Canvas가 CSS를 사용하는 대신에 너비와 높이 특성에 집착하십시오.

페이지 크기로 만들려면 div 안에 캔버스를 넣은 다음 canvas.width을 div.style.clientWidth과 같게 만드는 등의 다른 옵션이 있습니다.

다른 (전체 화면 여부) 창 크기 작업을 위해, 내 대답 얘기 참조

여기 "모델 좌표" Working with canvas in different screen sizes