Konva.js의 구성 요소를 사용하여 작은 HTML5 캔버스 애니메이션을 만들었습니다. 캔버스 요소가 2 배 크기라는 점을 제외하면 모든 것이 훌륭하게 작동합니다. HiDPI/Retina 디스플레이가 있기 때문에 생각합니다. 특히 요소는 다음과 같습니다.Canvas 요소의 적절한 HiDPI 렌더링 (Konva.js 사용)?
<canvas width="2048" height="1000" style="padding: 0px; margin: 0px; border: 0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1024px; height: 500px;"></canvas>
스타일 크기는 예상하고 있지만 최상위 너비/높이 속성 값은 두 배입니다.
https://github.com/jondavidjohn/hidpi-canvas-polyfill에서 HiDPI polyfill을 시도했지만 이것이 내 Canvas 요소의 예상 크기가되지만 Konva.js 요소는 크기가 조정되지 않은 것으로 보이며 모든 모양의 레이아웃이 완전히 엉망이됩니다.
누구나 Konva.js에서 좋은 HiDPI 동작을 얻었는지 궁금합니다. 그렇다면 어떻게, 어떻게, 그리고 그렇지 않으면, 어떻게 작동시킬 수 있을지에 대한 조언이 있습니까? (가능한 한 많은 장치에서 내 애니메이션을 렌더링하는 것이 중요합니다.)
Windows 용 Chrome에서만 테스트했는데 다른 브라우저는 다르게 동작 할 수 있습니다 ... – davewy