예
Y = 100 적색 선 그리기, 다음이 TextBaseline 다른 값 100을 Y 각 워드를 배치 =
자바 스크립트 :
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Draw a red line at y=100
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Place each word at y=100 with different textBaseline values
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 | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note: 브라우저에서을 다르게이 TextBaseline 속성 월 작품, 사용할 때 특히 "hanging" 또는 "ideographic" .
정의 및 사용
텍스트를 그릴 때이 TextBaseline 속성을 설정하거나 현재 텍스트 기준선을 반환 사용.
아래 그림은 지원하는 다양한베이스 라인을 보여 textBaseline 속성을 :
Note: fillText() 및 strokeText() 메서드를 캔버스에 텍스트를 배치 할 때 지정된이 TextBaseline 값을 사용합니다.
기본값: | alphabetic |
---|---|
자바 스크립트 구문 : | context .textBaseline="alphabetic|top|hanging|middle|ideographic|bottom"; |
속성 값
값 | 기술 | 플레이 |
---|---|---|
알파벳 | 태만. 텍스트 기준선은 일반 알파벳 기준입니다 | »플레이 |
상단 | 텍스트 기준선은 그들 광장의 선두입니다 | »플레이 |
교수형 | 텍스트 기준선이 걸려 기준입니다 | »플레이 |
중간 | 텍스트 기준선은 그들 광장의 중간이다 | »플레이 |
구체적 사례의 | 텍스트 기준은 표의 문자 기준입니다 | »플레이 |
바닥 | 텍스트 기준선은 경계 상자의 바닥이다 | »플레이 |
<캔버스 개체