HTML 캔버스 textAlign 둘 속성
예
위치 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);
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);
»시도
브라우저 지원
인터넷 익스플로러 9, 파이어 폭스, 오페라, 크롬과 사파리 지원 textAlign 둘 속성입니다.
참고 : 인터넷 익스플로러 8 이전 버전의 <캔버스> 요소를 지원하지 않습니다.
정의 및 사용
textAlign 둘은 앵커 세트로 속성 또는 현재 정렬의 텍스트 내용을 반환합니다.
일반적으로, 텍스트는 지정된위치에서 시작,하지만 당신은 textAlign 둘 = "권리"를 설정하면 텍스트가 위치 (150), 결국위치 (150)에배치됩니다.
팁 : fillText () 또는 strokeText () 메소드는 실제로 그리는 캔버스에 텍스트를 배치합니다.
| 기본값 : | 스타트 |
|---|---|
| 자바 스크립트 구문 : | 문맥 .textAlign = "센터 | 끝 |왼쪽 | 오른쪽 | 시작"; |
속성 값
| 值 | 描述 |
|---|---|
| start | 默认。文本在指定的位置开始。 |
| end | 文本在指定的位置结束。 |
| center | 文本的中心被放置在指定的位置。 |
| left | 文本在指定的位置开始。 |
| right | 文本在指定的位置结束。 |
HTML 캔버스 참조 설명서