높은 DPI 장치를 사용하여 WebGL 콘텐츠를 렌더링하는 방법은 무엇입니까?

Question

MacGL 망막 또는 픽셀 크롬 북과 같이 높은 도트 - 인치 디스플레이의 모든 기본 픽셀로 렌더링 할 WebGL을 설정하는 올바른 방법은 무엇입니까?

Answer 1

WebGL의 경우 비교적 간단합니다.

var desiredCSSWidth = 400; 
var desiredCSSHeight = 300; 
var devicePixelRatio = window.devicePixelRatio || 1; 

canvas.width = desiredCSSWidth * devicePixelRatio; 
canvas.height = desiredCSSHeight * devicePixelRatio; 

canvas.style.width = desiredCSSWidth + "px"; 
canvas.style.height = desiredCSSHeight + "px"; 

는 http://www.khronos.org/webgl/wiki/HandlingHighDPI

이 규칙을 따르는 것이 적합성 테스트가 있습니다 참조하십시오. 특히 브라우저가 WebGL 캔버스의 캔버스에 대한 백업 스토어의 크기를 변경할 수없는 경우.

일반 2D 캔버스의 경우 간단하지 않지만 질문하지 않았습니다.