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);
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Property | |||||
|---|---|---|---|---|---|
| textAlign | Yes | 9.0 | Yes | Yes | Yes |
정의 및 사용
textAlign 속성은 앵커 포인트에 따라 텍스트 내용의 현재 정렬을 설정하거나 반환합니다.
일반적으로 텍스트는 지정된 위치에서 시작 되지만 textAlign="right"를 설정하고 텍스트를 위치 150에 배치하면 텍스트가 위치 150에서 종료되어야 함을 의미 합니다 .
팁: fillText() 또는 strokeText() 메서드를 사용 하여 실제로 캔버스에 텍스트를 그리고 배치합니다.
| 기본값: | 시작 |
|---|---|
| 자바스크립트 구문: | 컨텍스트 .textAlign="중앙|끝|왼쪽|오른쪽|시작"; |
속성 값
| Values | Description | Play it |
|---|---|---|
| start | Default. The text starts at the specified position | |
| end | The text ends at the specified position | |
| center | The center of the text is placed at the specified position | |
| left | The text starts at the specified position | |
| right | The text ends at the specified position |
❮ HTML 캔버스 참조