픽셀을 설정하기 전에 CSS 상자를 측정하세요.
표시된 캔버스 크기를 읽고, 선택한 장치 배율을 곱하고, 뒷면 너비와 높이를 설정하고, CSS 공간 단위를 사용하여 게임 논리를 계속 사용할 수 있도록 그리기 좌표를 변환합니다. 너비나 높이를 변경한 후 변환을 다시 적용하세요. 해당 캔버스 속성을 할당하면 그리기 상태가 재설정되기 때문입니다.
1픽셀 그리드, 대각선 가장자리, 작은 UI 텍스트를 1, 1.5, 2와 같은 배율 인수로 비교합니다. 선명도와 반응성을 모두 확인하세요. 전체 devicePixelRatio 승수는 시작점일 뿐 모든 게임이 따라야 하는 규칙은 아닙니다. 렌더링 배율을 낮추면 CSS 레이아웃을 변경하지 않고 밀도가 높은 디스플레이에서 비용을 줄일 수 있습니다.
크기 조정 및 메모리를 선택의 일부로 처리
백업 저장소 픽셀 수는 두 차원 모두에서 증가하므로 각 방향으로 크기를 두 배로 늘리면 픽셀 수가 4배 증가합니다. 지원되는 가장 큰 디스플레이 크기에서 바쁜 장면을 테스트하고 고밀도 설정을 제공하기 전에 메모리 부족이나 느린 다시 그리기를 찾아보세요.
MDN의 캔버스 지침은 devicePixelRatio 기반 설정을 보여줍니다. WebGL의 모범 사례 페이지는 정수가 아닌 비율과 확대/축소로 미묘한 점을 설명합니다. 브라우저를 확대하거나 디스플레이 간에 창을 이동한 후 다시 확인하고, 유효 크기가 변경되지 않은 경우 백업 저장소를 반복적으로 재설정하지 마세요.
게임 Canvas의 devicePixelRatio 관련 질문
캔버스 너비는 항상 CSS 너비와 devicePixelRatio를 곱해야 합니까?
아니요. 콘텐츠가 선명해질 수 있지만 처리량과 메모리 사용량도 늘어납니다. 같은 장면과 시각적 검사로 전체 해상도와 제한된 배율을 비교하세요.
크기를 조정한 후 그림이 흐려지는 이유는 무엇입니까?
캔버스 너비나 높이를 변경하면 비트맵이 지워지고 컨텍스트 상태가 재설정됩니다. 배경 크기를 다시 계산하고, 컨텍스트 크기를 다시 조정하고, 장면을 다시 그립니다.
추가 읽을거리
오래된 정보를 발견하셨나요? 수정 사항 제보