wulin.com (www.vevb.com) 기사 소개 : HTML 캔버스 세로 정렬 된 텍스트, 캔버스 범위 내에서 텍스트 바이즈 라인의 속성 값을 사용할 수 있습니다. TextBaseline은 다음 값 중 하나를 설정할 수 있습니다. 상단, 교수형, 중간, 알파벳, IdeaGraphic 및 Bottom의 값을 설정할 수 있습니다. 달리 명시되지 않는 한 텍스트 바이 라인은 기본값이 문자로 속합니다.
HTML CANVAS 수직으로 정렬 된 텍스트, 캔버스 범위 내에서 TextBaseline 속성 값을 사용할 수 있습니다. TextBaseline은 다음 값 중 하나를 설정할 수 있습니다. 상단, 교수형, 중간, 알파벳, IdeaGraphic 및 Bottom의 값을 설정할 수 있습니다. 달리 명시되지 않는 한 텍스트 바이 라인은 기본값이 문자로 속합니다.
<! doctype html>
<html>
<헤드>
<title> html5_canvas_text_baseline </title>
<스타일>
바디 {마진 : 0px; 패딩 : 0px;}
#MyCanvas {Border : 1px Solid #9C9898; 여백 : 0 Auto; 마진-탑 : 200px; 왼쪽 마진 : 100px;}
</스타일>
<cript>
Window.onload = function () {
var canvas = document.getElementById (mycanvas);
var context = canvas.getContext (2d);
var x = canvas.width / 2;
var y = canvas.height / 2;
context.font = 30pt calibri;
// Textalign은 배치와 관련하여 텍스트를 가로 정렬합니다
context.textalign = 센터;
// TextBaseline은 글꼴 스타일과 관련하여 텍스트를 수직으로 정렬합니다
context.textBaseline = 중간;
Context.FillStyle = 파란색;
context.fillText (Hello World!, X, Y);
};
</스크립트>
</head>
<body>
<canvas id = mycanvas 너비 = 578 높이 = 200>
</캔버스>
</body>
</html>