크기가 조정 된 HTML5 캔버스에서 글꼴 크기가 1보다 작 으면

Question

HTML5 캔버스 2D 컨텍스트가있는 사각형 격자를 만듭니다. & 캔버스의 크기를 그리드 사각형이 하나의 단위가되도록 변환하지만 30px, 말하자면 변환되지 않은 것입니다. Here's an example 10x10 크기의 30px 정사각형입니다.

한 가지를 제외하면 잘 작동합니다 : 텍스트.

정사각형 안에 들어 맞는 캔버스의 글꼴을 지정하려면 글꼴 크기를 1보다 작게 지정해야합니다.

예를 들어, ".5px sans-serif"는 정사각형 크기의 절반 (예 : 30px 변형되지 않은 사각형의 경우 "15px sans-serif")이어야합니다. Chrome에서 적어도 실패하고 캔버스가 더 큰 기본값으로 되돌아갑니다.

내가 찾은 유일한 해결책은 텍스트를 그릴 때 캔버스 크기 조정을 실행 취소하는 것입니다.

하위 픽셀 글꼴 사양을 통해이를 해결할 수있는 방법이 있습니까? (당연히 변환 후 폰트는 깔끔한 큰 폰트가 될 것입니다. 서브 픽셀 폰트 크기는 캔바스 변환에만 관련됩니다.)

Answer 1

글꼴 절반 픽셀 변환되지 않은 것을 의미한다. 그것은 규모 아니다 값이지만 절대 값.

글꼴 크기를 크기 조정되지 않은 크기, 크기 조정 컨텍스트, 그리기 tex로 지정하십시오. t 및 그리드를 선택하고 필요에 따라 눈금을 제거하십시오.

이 데모는 행동이 표시됩니다 :
Scale demo

필수적인 부분 :

ctx.font = '15px sans-serif'; 
ctx.scale(1/30, 1/30); 
ctx.fillText('TEXT', 5, 5); 
ctx.strokeRect(0, 0, 30, 30); 

Example demo

이 예제는 왼쪽 상단에 작은 점을 생성합니다 모서리.

Answer 2

솔직히 서브 픽셀 폰트 크기는 의미가 없습니다. 대신 텍스트를 모두 삭제하거나 "그리스어"텍스트 줄을 거의 직선으로 그어 두지 않을 수도 있습니다. 몇 가지 알려진 표준 크기로 measureText()를 사용하여 각 행의 적절한 상대적 길이를 얻은 다음 (읽을 수없는) 텍스트가 있음을 나타내는 직선을 작게 그립니다.

Answer 3

힘든 일이라고 생각한 후에 변형을 사용하는 간단한 해결책이 있다는 것을 깨달았습니다.

컨텍스트가 현재 복잡한 방식으로 변형되어 있고 주어진 위치에 텍스트를 그려야한다고 생각하십시오. (tx,ty). 당신이 알 필요가있는 유일한 것은 현재의 눈금 (scaleX,scaleY)입니다 (이 값은 부분적인 폰트 크기를 계산하기 위해 알아야 할 필요가 있습니다). 그러면 변환 된 좌표계로 변환 한 다음 텍스트의 크기를 조정하고 그릴 수 있습니다 :

당신은 텍스트 크기와 관련된 모든 수학을해야하는 경우

ctx.save(); 
ctx.translate(tx, ty); 
ctx.scale(1/scaleX, 1/scaleY); 
ctx.fillText("Some String", 0, 0); 
ctx.restore(); 

은, '의 스케일 없음 "에서 수행 좌표를 할 수 있습니다. 0.5px에 글꼴 크기를 설정