다른 화면 크기의 캔버스 작업

Question

HTML5 <canvas> 태그를 사용하여 간단한 게임을 만들고 Phonegap을 사용하여 코드를 기본 응용 프로그램으로 컴파일하려고하지만 canvas은 크기에 비례하지 않는 좌표를 사용합니다. 따라서 960x640 화면의 20,20은 480x800 화면과 다릅니다.

다른 화면 크기로 <canvas> (전체 화면으로 표시)으로 작업하는 방법을 알고 싶습니다.

Answer 1

다른 화면 크기로 전체 화면으로 작업하는 방법을 알고 싶습니다.

이것은 매우 쉬운 해결책이있는 일반적인 문제입니다. 흔히 "모델"좌표라고 부르는 것에서 하드 캔버스 좌표를 분리하여이를 수행합니다.

정말 코드가 어떻게 구성되어 있느냐에 따라 달라 지지만, 게임의 대부분 또는 모든 화면을 차지하는 세계에 너비와 너비가 있다고 가정합니다. 당신이 목표로하는 화면의 두 종횡비는 1.5와 1.666이므로 작은 하나에 맞추고 싶을 것입니다

그래서 당신은 정말로 "모델"좌표 세트로 게임을하고 싶습니다. 화면이나 캔버스 크기에 영향을주지 않습니다. 두 화면 크기 만 타겟팅하기 때문에 모델 좌표는 두 종횡비 중 작은 크기이므로 960x640 일 수 있습니다. 그럴 필요는 없습니다. 모델 좌표는 100x50이 될 수 있습니다. 그러나이 예제에서는 모델 좌표로 960x640을 사용합니다.

내부적으로 이러한 모델 좌표는 사용하지 않습니다. 게임을 만들 때 다른 좌표로 생각해 본 적이 없습니다.

화면 크기가 960x640 인 경우 1 : 1 매핑 이후 아무 것도 변경할 필요가 없으므로 편리합니다.

화면 크기가 실제로 800x480 인 경우 화면에 그릴 시간이되면 모델 좌표를 (3/4)만큼 변환하여 게임을 만들고 내부적으로 사용하게됩니다. 960x480이지만 (720x480) 영역에 그려집니다. 마우스 또는 터치 입력을 받아 (4/3) 곱하면 화면 좌표가 모델 좌표로 바뀝니다.

이 변환은 모든 것을 그리기 전에 ctx.scale(3/4, 3/4)으로 전화하는 것처럼 쉽습니다.

그래서 두 플랫폼 모두 게임이 960x640 크기라고 가정하여 작성한 코드를 모두 갖습니다. 모델 좌표가 화면 좌표가되는 유일한 시간은 캔버스 (다른 크기 임)로 그릴 때 캔버스 마우스/터치 좌표를 모델 좌표로 변환하는 경우입니다.

그 점이 혼란 스럽다면 샘플을 만들 수 있습니다.window 개체의

Answer 2

화면 크기가 2 개 밖에 없으므로 크기가 다른 2 개의 캔버스 (및 논리가 뒤에 있음)를 가질 수 있습니다.
이 솔루션을 좋아하지 않는다면 픽셀 절대 크기 대신 %로만 크기를 사용할 수 있다고 생각합니다. 마지막으로 메타 태그에 다른 값을 설정하십시오.

Answer 3

사용 innerWidth/innerHeight : 그것은 모든 화면을 자동으로 조정합니다

canvas.height = window.innerHeight; 
canvas.width = window.innerWidth; 

; 당신은 크로스 플랫폼/화면 호환성을 테스트해야합니다!

var innerWidth = window.innerWidth; 
x = innerWidth/3;