예
위치 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 | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
정의 및 사용
textAlign과 속성을 설정하거나 앵커 포인트에 따라, 텍스트 내용에 대한 현재의 배치를 돌려줍니다.
일반적으로 텍스트가됩니다 START 당신이 textAlign을 = "권리"를 설정하면, 그러나, 지정된 위치에 위치 (150)에 텍스트를 배치, 그것은 텍스트의 위치 (150)로 끝나야 것을 의미한다.
Tip: 사용 fillText() 또는 strokeText() 실제로 그리는 캔버스에 텍스트를 배치하는 방법을.
| 기본값: | 스타트 |
|---|---|
| 자바 스크립트 구문 : | context .textAlign="center|end|left|right|start"; |
속성 값
| 값 | 기술 | 플레이 |
|---|---|---|
| 스타트 | 태만. 텍스트는 지정된 위치에서 시작 | »플레이 |
| 종료 | 텍스트는 지정된 위치에 종료 | »플레이 |
| 센터 | 텍스트의 중심은 지정된 위치에 배치됩니다 | »플레이 |
| 왼쪽 | 텍스트는 지정된 위치에서 시작 | »플레이 |
| 권리 | 텍스트는 지정된 위치에 종료 | »플레이 |
<캔버스 개체