HTML 참조 매뉴얼

HTML 태그大全

HTML canvas textBaseline 属性

textBaseline 是 Canvas 2D API 描述绘制文本时，当前文本基线的属性。

在线示例

在y = 100处画一条红线，然后将每个单词在y = 100处放置不同的textBaseline值：

예제

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas textBaseline 속성 사용-기본 강의(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="4" height="2" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 태그
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Y =　100에서红线을 그립니다
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//y =　100의 단어는 다른 textBaseline 값이 있습니다
ctx.textBaseline="top";　
ctx.fillText("Top",5,100);　
ctx.textBaseline="bottom";　
ctx.fillText("Bottom",50,100);　
ctx.textBaseline="middle";　
ctx.fillText("Middle",120,100);　
ctx.textBaseline="alphabetic";　
ctx.fillText("Alphabetic",190,100);　
ctx.textBaseline="hanging";　
ctx.fillText("Hanging",290,100);　
</script>
</body>
</html>

테스트해 보세요 ‹/›

브라우저 상호 운용성

IEFirefoxOperaChromeSafari

인터넷 익스플로어어 9Firefox, Opera, Chrome, Safari 및 Safari가 textBaseline를 지원합니다. 속성

주의:textBaseline 속성은 다른 브라우저에서 효과가 다르며, "hanging" 또는 "ideographic"를 사용할 때 특히 그렇습니다.

주의:인터넷 익스플로어어 8 및 이전 버전은 <canvas> 요소를 지원하지 않습니다.

정의와 사용법

textBaseline 속성은 텍스트를 그릴 때 사용하는 현재 텍스트 기준선을 설정하거나 반환합니다.

아래 그림은 textBaseline 속성이 지원하는 다양한 기준선을 보여줍니다:

주의:fillText() 과strokeText() 메서드가 캔버스 위에서 텍스트를 정위치 시키면, 지정된 textBaseline 값이 사용됩니다.

기본 값:	alphabetic
JavaScript 문법:	context.textBaseline="alphabetic\|top\|hanging\|middle\|ideographic\|bottom";

속성 값

값	설명
alphabetic	기본 설정. 문자 기준선은 일반 글자 기준선입니다.
top	문자 기준선은 em 박스의 상단입니다.
hanging	문자 기준선은��임 기준선입니다.
middle	문자 기준선은 em 박스의 중앙입니다.
ideographic	문자 기준선은 의미 기준선입니다.
bottom	문자 기준선은 em 박스의 하단입니다.

HTML canvas 참조 가이드

HTML: <template> 태그