텍스트 그리기

텍스트 그리기

캔버스 랜더링 컨텍스트는 텍스트를 렌더링하는 두 가지 방법을 제공한다.

• fillText(text, x, y [, maxWidth])
  • 주어진 (x,y)위치에 주어진 텍스트를 채운다. 최대 폭은 옵션 값(생략가능)
• strokeText(text, x, y [, maxWidth])
  • 주어진 (x,y) 위치에 주어진 텍스트를 칠한다. 최대 폭은 옵션 값(생략가능)

fillText예제

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = '48px serif';
  ctx.fillText('Hello world', 10, 50);
}

strokeText 예제

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = '48px serif';
  ctx.strokeText('Hello world', 10, 50);
}

텍스트 스타일 적용하기

• font = value (en-US)
  • 텍스트를 그릴 때 사용되는 현재 텍스트 스타일. 이 문자열은 CSS font 프로퍼티와 동일한구문을 사용합니다. 기본값으로 sans-serif의 10px가 설정되어 있습니다.
• textAlign = value (en-US)
  • 텍스트 정렬 설정. 사용가능한 값: start, end, left, right, center. 기본 값은 start 입니다.
• textBaseline = value (en-US)
  • 베이스라인 정렬 설정. 사용가능한 값: top, hanging, middle, alphabetic, ideographic, bottom. 기본 값은 alphabetic 입니다
• direction = value (en-US)
  • 글자 방향. 사용가능한 값: ltr, rtl, inherit. 기본 값은 inherit 입니다.

    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    if(canvas.getContext){
        draw();
    }
    
    function draw(){
        //body태그에서 p태그의 text를 가져옴
        const txt = document.querySelector('p').childNodes[0].nodeValue;
        //잘 가지고 오는지 확인
        console.log(txt);
        //텍스트 스타일 설정
        ctx.font = '12px serif';
        //가져온 텍스트 붙이기
        ctx.fillText(txt,10,50, 450);
        //텍스트 스타일 설정
        ctx.font = '48px serif';
        //x축을 어디에 놓을 것인지 선택하는 것이다. 
        ctx.textAlign = 'left'
        //y축을 어디에 놓을 것인지 선택하는 것이다. 
        ctx.textBaseline = 'top'
        ctx.strokeText('Javascript!',250,100)
        ctx.font = '48px serif';
        ctx.textBaseline = 'middle';
        ctx.textAlign = 'right';
        //특수문자만 방향이 바뀜
        ctx.direction = 'rtl';
        ctx.fillText('Javascript!',400,200)
   }

어드밴스드 텍스트 측정

• measureText()
  • 현재 스타일로 특정 텍스트가 그려질 때의 폭, 픽셀 등을 포함하는 TextMetrics 객체 리턴

    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    if(canvas.getContext){
        draw();
    }
    
    function draw(){
        let txt = 'I love Javascript'
        let text = ctx.measureText(txt); // TextMetrics object
        text.width; 
        console.log(text.width)
   }