html5 캔버스에서 글꼴, 그림, 흐릿한 그래픽 그리기 문제 해결

html5 캔버스 그리기 글꼴, 그림 및 그래픽 흐림 문제

occurrence

주로 높은 dpi 장치에서 발생합니다. 즉, 휴대폰이나 태블릿과 같이 평방 인치당 픽셀 수가 더 많습니다. 물론 많은 고급 데스크톱 컴퓨터에는 고해상도 및 높은 DPI 모니터도 있습니다.

브라우저에서 캔버스 크기 조정의 원리

style이 설정되지 않은 경우 html 속성인 width 및 height가 크기로 사용됩니다.

스타일의 너비와 높이가 설정되면 스타일 설정은 브라우저에 그려지는 최종 크기가 됩니다.

즉, 속성의 너비와 높이가 실제 너비와 높이를 나타내지 않으므로 높은 dpi에서는 캔버스가 확대되어 흐릿해집니다.

캔버스의 너비와 높이 속성은 브라우저에 그린 후 현재 dpi에 따라 크기가 조정됩니다.

devicePixelRatio(창 멤버)는 높은 dpi 상태에서 확대되는 속성 너비/높이의 비율을 저장합니다.

오류 해결 사례

온라인에서 캔버스 블러 검색, 두 가지 해결 방법이 있으며 현재는 적합하지 않을 수 있습니다.

One은 CanvasRenderingContext2D.translate(0.5,0.5);

이것은 실제로 3D 드로잉 분야에서 픽셀 오프셋을 처리하기 위해 일반적으로 사용됩니다. 캔버스의 2D 컨텍스트에서는 이미 이 문제를 처리했습니다.

다른 하나는 backingStorePixelRatio입니다. 다음과 유사한 코드가 표시됩니다. 이 backingStorePixelRatio는 새 브라우저에서 제거되었으며 더 이상 존재하지 않습니다.

var ctx = document.createElement("canvas").getContext("2d"),
        dpr = window.devicePixelRatio || 1,
        bsr = ctx.webkitBackingStorePixelRatio ||
              ctx.mozBackingStorePixelRatio ||
              ctx.msBackingStorePixelRatio ||
              ctx.oBackingStorePixelRatio ||
              ctx.backingStorePixelRatio || 1

조사 중에 캔버스를 동적으로 생성하는 방법을 사용했습니다. 스타일의 너비/높이에 크기 조정 비율 devicePixelRatio를 곱하여 캔버스의 너비/높이 속성을 가져옵니다. <code>我在研究时用了动态创建canvas的方法，样式的width/height乘以缩放比devicePixelRatio得到canvas的属性width/height。<br>

사용자 설정 등 브라우저의 dpi가 변경되거나 창을 높은 dpi 모니터에서 낮은 dpi 모니터로 이동할 때 발생하기 때문에 완벽한 해결 방법은 아닙니다. (저의 1080p 일반 23인치 모니터는 1.25배이고, 태블릿은 2.0배인데, 창 드래그 앤 드롭이 발생합니다.)

Solution
1. 창의 onresize 이벤트를 동적으로 생성 및 모니터링하고, 그에 따라 캔버스를 다시 빌드합니다. devicePixelRatio.
2. 캔버스 스타일의 너비와 높이를 동적으로 조정하고 크기 조정 이벤트도 모니터링합니다. 그런 다음 CanvasRenderingContext2D.scale과 협력하여 그려진 콘텐츠의 비율을 동적으로 조정합니다.

브라우저에는 devicePixelRatio 변경 이벤트나 dpi 변경 이벤트가 없습니다. 알고 계시다면 메시지를 남겨주세요.

위 내용은 html5 캔버스에서 글꼴, 그림, 흐릿한 그래픽 그리기 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!