テキストの描画

テキストの描画

キャンバスレンダリングコンテキストには、2つのテキストをレンダリングする方法があります.

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 Propertyと同じ構文を使用します.デフォルトはsans-serifの10 pxに設定されています.

textAlign = value (en-US)

テキストのソートを設定します.使用可能な値:start、end、left、right、center.デフォルトはstartです.

textBaseline = value (en-US)

ベースラインのソートを設定します.使用可能な値:top、hang、middle、アルファベット、イタリア、bottom.デフォルトはアルファベット

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)
   }