최신 웹 개발 튜토리얼
 

HTML canvas textBaseline Propery

<캔버스 개체

Y = 100 적색 선 그리기, 다음이 TextBaseline 다른 값 100을 Y 각 워드를 배치 =

YourbrowserdoesnotsupporttheHTML5canvastag.

자바 스크립트 :

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 속성을 :

이 TextBaseline 그림

Note: fillText()strokeText() 메서드를 캔버스에 텍스트를 배치 할 때 지정된이 TextBaseline 값을 사용합니다.

기본값: alphabetic
자바 스크립트 구문 : context .textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";

속성 값

기술 플레이
알파벳 태만. 텍스트 기준선은 일반 알파벳 기준입니다 »플레이
상단 텍스트 기준선은 그들 광장의 선두입니다 »플레이
교수형 텍스트 기준선이 걸려 기준입니다 »플레이
중간 텍스트 기준선은 그들 광장의 중간이다 »플레이
구체적 사례의 텍스트 기준은 표의 문자 기준입니다 »플레이
바닥 텍스트 기준선은 경계 상자의 바닥이다 »플레이

<캔버스 개체