HTML 캔버스 textAlign 속성

HTML5 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);

직접 시도해 보세요

문법

context.textAlign="center|end|left|right|start";

속성 값

값 설명
start 기본. 텍스트가 지정된 위치에서 시작됩니다.
end 텍스트가 지정된 위치에서 끝납니다.
center 텍스트의 중앙이 지정된 위치에 배치됩니다.
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> 요소를 지원하지 않습니다.

HTML5 Canvas 참조 가이드