Canvas textAlign 속성

Canvas 참조 매뉴얼

정의와 사용법

textAlign 속성이 앵커에 따라 텍스트 내용의 현재 정렬 방식을 설정하거나 반환합니다.

보통, 문자열은 지정된 위치에서 시작되지만, textAlign="right"로 설정하고 위치 150에 문자열을 배치하면 위치 150에서 끝납니다.

ヒント:사용하여 fillText() 또는 strokeText() 메서드는 실제로 캔버스에 문자열을 그려서 위치를 정합니다。

예제

위치 150에서 빨간 선을 생성합니다. 위치 150은 아래 예제에서 정의된 모든 문자열의 기준점입니다.每种 textAlign 속성 값의 효과를 연구해 보세요：

당신의 브라우저는 canvas 태그를 지원하지 않습니다.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 위치 150에서 파란 선을 생성합니다
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// 다른 textAlign 값을 표시합니다
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="center|end|left|right|start";

속성 값

값 설명
시작 기본적으로. 문자열이 지정된 위치에서 시작됩니다。
끝 문자열이 지정된 위치에서 끝납니다。
중앙 문자열의 중앙이 지정된 위치에 배치됩니다。
왼쪽 문자열이 왼쪽 정렬됩니다。
오른쪽 문자열이 오른쪽 정렬됩니다。

기술 세부 사항

기본 값： 시작

브라우저 지원

표의 숫자는 해당 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

주의사항:Internet Explorer 8 및 이전 버전은 <canvas> 요소를 지원하지 않습니다.

Canvas 참조 매뉴얼