Canvas textBaseline 속성

Canvas 참조 매뉴얼

정의와 사용법

textBaseline 속성은 그리는 텍스트의 현재 텍스트 기준선을 설정하거나 반환합니다.

下面的图示演示了 textBaseline 属性支持的各种基线：

텍스트 베이스 라인 그래픽

주의사항:fillText() 或 strokeText() 在画布上定位文本时，将使用指定的 textBaseline 值的方法。

实例

蓝色填充矩形的定义：

您的浏览器不支持 canvas 标签。

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

직접 시험해 보세요

문법

컨텍스트.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";

속성 값

값 설명
알파벳 기본. 텍스트 베이스 라인은 일반 글자 베이스 라인입니다.
상단 텍스트 베이스 라인은 em 박스의 위쪽입니다.
비悬浮 텍스트 베이스 라인은 비悬浮 베이스 라인입니다.
중간 텍스트 베이스 라인은 em 박스의 가운데입니다.
의미 베이스 라인 텍스트 베이스 라인은 의미 베이스 라인입니다.
하단 텍스트 베이스 라인은 em 박스의 아래쪽입니다.

기술적인 세부 사항

기본값: 알파벳

브라우저 지원

표에서는 각 속성을 최초로 완전히 지원하는 브라우저 버전을 기재했습니다.

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
4.0 9.0 3.6 4.0 10.1

주의사항:Internet Explorer 8 이상의 버전은 <canvas> 요소를 지원하지 않습니다.

Canvas 참조 매뉴얼