Canvas Text

Canvas Text

 

• fillText(text,x,y)
  - 색상이 채워져 있는 텍스트를 작성하는 메소드
  - x와 y는 텍스트의 x와 y 좌표이고 fillStyle 속성으로 기본 값은 #000000 이다.
• font
  - 글자의 속성을 지정하는 속성
  - 기본 값은 10px sans-serif이고 사용 방법은 css의 font 속성과 거의 동일하다.
  

  const canvas37 = document.getElementById('canvas37');
  const ctx37 = canvas37.getContext('2d');
  ctx37.font = 'bold 7em Arial,sans-serif';
  ctx37.fillStyle=gra3;
  ctx37.fillText('Canvas',100,240);​

• strokeText(text,x,y)
  - 테두리로 이루어진 텍스트를 작성하는 메소드로 면 색상은 채워지지 않는다.
  - 사용 방법은 fillText() 메소드와 동일하다.
  

  const canvas38 = document.getElementById('canvas38');
  const ctx38 = canvas38.getContext('2d');
  ctx38.font = 'bold 7em Arial,sans-serif';
  ctx38.strokeStyle=gra3;ctx38.lineWidth=5;
  ctx38.strokeText('Canvas',100,240);​

• textAlign
  - 텍스트 좌표의 수평 기준을 지정하는 속성
  

  const canvas39 = document.getElementById('canvas39');
  const ctx39 = canvas39.getContext('2d');
  const x39 = canvas39.width/2;
  const y39 = canvas39.height/5-10;
  const alignText=['start','end','left','center','right'];
  
  ctx39.strokeStyle = 'red';
  ctx39.moveTo(x39,0);ctx39.lineTo(x39,canvas39.height);
  ctx39.stroke();
  ctx39.font = 'bold 20px Arial,sans-serif';
  
  for(let i=0;i<5;i++){
      ctx39.textAlign = alignText[i];
      ctx39.fillText(alignText[i],x39,y39*(i+1))
  }
  
  // ctx39.textAlign='start';
  // ctx39.fillText('start',x39,40);
  // ctx39.textAlign='end';
  // ctx39.fillText('end',x39,120);
  // ctx39.textAlign='left';
  // ctx39.fillText('left',x39,200);
  // ctx39.textAlign='center';
  // ctx39.fillText('center',x39,280);
  // ctx39.textAlign='right';
  // ctx39.fillText('right',x39,360);​

• textBaseline
  - 텍스트 좌표의 수직 기준을 지정하는 속성
  

  const canvas40 = document.getElementById('canvas40');
  const ctx40 = canvas40.getContext('2d');
  const x40 = canvas40.width/5;
  const y40 = canvas40.height/2;
  
  ctx40.strokeStyle = 'red';
  ctx40.moveTo(0,y40);ctx40.lineTo(canvas40.width,y40);
  ctx40.stroke();
  
  ctx40.font='bold 20px Arial,sans-serif';
  ctx40.textAlign='center';
  ctx40.textBaseline='top';
  ctx40.fillText('top',x40-50,y40);
  ctx40.textBaseline='bottom';
  ctx40.fillText('bottom',x40*2-50,y40);
  ctx40.textBaseline='middle';
  ctx40.fillText('middle',x40*3-50,y40);
  ctx40.textBaseline='alphabetic';
  ctx40.fillText('alphabetic',x40*4-50,y40);
  ctx40.textBaseline='hanging';
  ctx40.fillText('hanging',x40*5-50,y40);​

• measureText(text).width
  - 현재 글꼴에서 텍스트의 폭 계산하는 메소드
  - 텍스트 좌표의 수직 기준을 지정하는 속성
  

  const canvas41 = document.getElementById('canvas41');
  const ctx41 = canvas41.getContext('2d');
  const txt41 = 'Canvas';
  ctx41.textAlign='center';
  ctx41.font='100px Arial,sans-serif';
  ctx41.fillText(txt41,canvas41.width/2,150);​