HTML 참고 매뉴얼

HTML 태그 전체 목록

HTML canvas textAlign 속성

textAlign은 Canvas 2D API 설명을 통해 텍스트를 그리는 동안 텍스트의 정렬 방식의 속성. 주의할 것은 CanvasRenderingContext을 기반으로 한 정렬입니다.2D.fillText方法的x의 값을. textAlign="center"라면, 그 텍스트가 x에 그려질 것입니다.-50%*width.

HTML canvas 참조 가이드

온라인 예제

위치150에서 빨간 선을 그립니다. 위치150은 다음 예제에서 정의된 모든 텍스트의 위치입니다. 각 textAlign 속성 값의 효과를 연구하세요:

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas textAlign 속성 사용-기본 강의(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 태그.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//위치150을 적은 빨간 선을 생성합니다
ctx.strokeStyle="red";
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);
</script>
</body>
</html>

테스트를 보세요 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome 및 Safari가 textAlign을 지원합니다 속성.

주의:Internet Explorer 8 이전 버전에서는 <canvas> 요소를 지원하지 않습니다.

정의 및 사용법

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

일반적으로 텍스트는 지정된 위치에서 시작되지만, textAlign = "right"을 설정하고 텍스트를 위치에 배치하면150이면 텍스트가 위치에 배치되어야 합니다.150에서 끝납니다.

고려사항:사용하십시오 fillText() 또는strokeText() 메서드는 실제로 캔버스에서 텍스트를 그려서 위치를 정합니다.

기본 값:	start
JavaScript 문법:	context.textAlign="center\|end\|left\|right\|start";

속성 값

값	설명
start	기본 설정. 텍스트가 지정된 위치에서 시작합니다.
end	텍스트가 지정된 위치에서 끝납니다.
center	텍스트의 중앙이 지정된 위치에 배치됩니다.
left	텍스트가 지정된 위치에서 시작합니다.
right	텍스트가 지정된 위치에서 끝납니다.

HTML canvas 참조 가이드

HTML: <template> 태그