devicePixelRatio 사용이 컨텍스트에서 작동하지 않는 이유

Question

내 질문은 devicePixelRatio 사용에 관한 것입니다. 다음 예를 고려해보세요:

으아악

내가 원하는 것은 이것이다:

내 화면의 devicePixelRatio는 2입니다.

내 목표는 5x5 크기의 캔버스에 1x1 크기의 점을 표시하는 것입니다.

제가 이해한 바를 적용하여 디스플레이 버퍼 크기에 비해 드로잉 버퍼 크기를 두 배로 늘렸습니다.

포인트 크기: 1x1의 경우 결과가 좋습니다.

그러나 캔버스의 크기는 여전히 두 배입니다. 10x10 무엇을 위해? 설명은 당연히 뻔하지만...

---

제 질문이 5월 1일에 다시 작성되었는데 명확하지 않습니다

내 화면은 2

와 같은 window.devicePixelRatio 값을 반환합니다. 내 목표는 픽셀을 정사각형으로 표시하는 코드를 작성하는 것입니다.

정사각형의 크기는 5x5픽셀입니다.

다음 코드를 사용해 보았습니다.

으아악

결과는 다음과 같습니다: 스크린샷을 복사하여 붙여넣었습니다

Gimp 아래에 있어서 확대해서 그리드를 추가했어요

검은 점, ctx.fillRect(3, 3, 1,1)의 결과는 정확히 내가 원하는 크기입니다.

단, 빨간색 배경의 크기는 10 x 10입니다. 5x5였으면 좋겠다

Answer 1

내가 이해한 바로는 OP가 원하는 것은 5x5px의 물리적 픽셀과 1x1px의 포인트가 있는 캔버스입니다. 여기에 .scale를 사용하지 않고 또 다른 시도가 있습니다.

으아아아 으아아아

---

원래 솔루션

기본적으로 컨텍스트와 캔버스는 서로 다른 두 가지 논리를 유지합니다. 컨텍스트는 그리기 버퍼이고 캔버스는 그리기 버퍼의 결과를 올바른 크기로 조정하는 역할만 담당합니다.

캔버스가 동일한 그리기 버퍼를 유지하면서 높은 장치 픽셀 비율의 장치에 대해 캔버스에 그리려면 다음을 사용할 수 있습니다. ctx.scale 方法，该方法应根据您传入的值（例如 devicePixelRatio):

으아아아 으아아아