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

我在研究时用了动态创建canvas的方法，样式的width/height乘以缩放比devicePixelRatio得到canvas的属性width/height。<br>

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

<code><span style="font-size: 14px"><strong><span style="font-family: Microsoft YaHei">解决方法</span></strong></span><br><span style="font-family: Microsoft YaHei; font-size: 14px">1、动态创建并监视window的onresize事件，根据<span style="font-family: Consolas">devicePixelRatio</span>重建canvas。<br>2、动态调整canvas样式的宽高，同样监视onresize事件。再配合<span style="font-family: Microsoft YaHei">CanvasRenderingContext2D.scale动态缩放绘制内容的比例。</span><br></span><span style="font-family: Microsoft YaHei; font-size: 14px">浏览器都没有devicePixelRatio改变的事件，或者dpi改变的事件，如果你知道，请留言。</span><br></code>

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