캔버스의 텍스트가 흐릿함 2d

Question

캔버스를 사용하여 그린 텍스트를 더 명확하게 만들려면 어떻게해야합니까 (context.fillText).

다음은 수정하려는 흐림 텍스트의 스크린 샷입니다. 스크린 샷은 최신 Mac 용 Chrome 버전을 사용하여 촬영됩니다. 시도한 모든 브라우저에서 출력이 흐려집니다.

나는 three.js를 사용하고 있으며 화면에 텍스트를 쓰고 있는데 canvas2d를 사용하고 있습니다.

카메라를 오브젝트 가까이로 움직여 페이지를 확대하면 모든 캔버스 요소가 점점 더 흐려집니다.

어떻게하면 해결할 수 있습니까?

는 또한 텍스트가 여기 흐리게되는 것을 볼 수 있습니다

Answer 1

http://stemkoski.github.io/Three.js/Texture-From-Canvas.html 당신은 텍스트의 질감을 생성하기 때문에이 유일한 방법은 정말 텍스처 해상도를 증가시키는 것이다. 현재 일어나고있는 일은 작은 텍스처를 가져 와서 늘리면 흐리게됩니다. 예를 들어 이미지 축소판을 전체 크기로 늘리면 똑같은 일이 발생합니다.

은 내가 텍스처의 선명도를 높이기 위해 무슨 짓을

Live Demo

에 의해 캔버스 (600)을 작성했다 예를 들어 중요하지 않습니다, 무부하 텍스처, 검은 색 영역을 무시 120 (이 데모가 사용했던 크기의 두 배입니다)에 텍스트를 그려 넣고 fontsize을 120px로 설정 한 다음 텍스처 크기의 절반 인 60만큼 메쉬 300을 만듭니다.

// Specified the width I wanted 
    canvas1.width=600; 
    // Specified the height I wanted 
    canvas1.height=120; 
    // Made the font larger 
    context1.font = "Bold 100px Arial"; 
    context1.fillStyle = "rgba(255,0,0,0.95)"; 
    // changed the position of the text on the created canvas 
    context1.fillText('Hello, world!', 0, 100); 

난 그냥 50 % 텍스처의 크기였다 메쉬를, 원 방법 큰 지정된 메쉬를 생성

는 데모 크기 메쉬와 일치합니다.

var mesh1 = new THREE.Mesh(
     new THREE.PlaneGeometry(300, 60), 
     material1 
    );