예
위치 150 위치 150에 빨간색 라인을 만들기 아래의 예에 정의 된 모든 텍스트의 앵커 지점입니다. 각 textAlign과 속성 값의 효과를 연구 :
자바 스크립트 :
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create a red line in position 150
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// Show the different textAlign values
ctx.textAlign="start";
ctx.fillText("textAlign=start",150,60);
ctx.textAlign="end";
ctx.fillText("textAlign=end",150,80);
ctx.textAlign="left";
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";
ctx.fillText("textAlign=center",150,120);
ctx.textAlign="right";
ctx.fillText("textAlign=right",150,140); »그것을 자신을 시도 브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| textAlign | 예 | 9.0 | 예 | 예 | 예 |
정의 및 사용
textAlign 둘의 속성 집합 또는 앵커 포인트에 따라, 텍스트 내용의 현재 정렬을 반환합니다.
일반적으로, 텍스트는 textAlign 둘 = "권리"를 설정 한 경우, 그러나, 지정된 위치에서시작하고 위치 (150)에 텍스트를 배치합니다, 그것은 텍스트의 위치 (150)에 END해야 함을 의미한다.
팁 : 사용 fillText() 또는 strokeText() 실제로 그리는 캔버스에 텍스트를 배치하는 방법을.
| 기본값: | 스타트 |
|---|---|
| 자바 스크립트 구문 : | context.textAlign="center|end|left|right|start"; |
속성 값
| 값 | 기술 | 플레이 |
|---|---|---|
| start | 태만. 텍스트는 지정된 위치에서 시작 | »플레이 |
| end | 텍스트는 지정된 위치에 종료 | »플레이 |
| center | 텍스트의 중심은 지정된 위치에 배치됩니다 | »플레이 |
| left | 텍스트는 지정된 위치에서 시작 | »플레이 |
| right | 텍스트는 지정된 위치에 종료 | »플레이 |