HTML 캔버스 textBaseline 속성
정의와 사용법
textBaseline 속성은 그리는 문자의 현재 기본선을 설정하거나 반환합니다。
아래의 그림은 textBaseline 속성이 지원하는 다양한 기본선을 보여줍니다：
주의:fillText() 또는 strokeText() 문자를 캔버스에 위치시키는 메서드는 지정된 textBaseline 값을 사용합니다.
예제
파란색으로 채운 사각형을 정의합니다：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 위치 y=100에서 파란 선을 그립니다
ctx.strokeStyle="blue";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
// y=200에서 다른 textBaseline 값으로 각 단어를 배치합니다
ctx.textBaseline="top";
ctx.fillText("Top",5,100);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",50,100);
ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100);
문법
context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
속성 값
| 값 | 설명 |
|---|---|
| alphabetic | 기본적으로, 문자 기준선은 일반적인 글자 기준선입니다. |
| top | 문자 기준선은 em 프레임의 위쪽입니다. |
| hanging | 문자 기준선은 비스득 기준선입니다. |
| middle | 문자 기준선은 em 프레임의 가운데입니다. |
| ideographic | 문자 기준선은 의미 기준선입니다. |
| bottom | 문자 기준선은 em 프레임의 아래쪽입니다. |
기술 세부 사항
| 기본 값: | alphabetic |
|---|
브라우저 지원
표의 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
주의:Internet Explorer 8 이상의 버전은 <canvas> 요소를 지원하지 않습니다.
