Wulin.com (www.vevb.com) 기사 소개 : HTML5 Canvas 텍스트의 텍스트 측정을 얻으려면 측정 텍스트 () Canvas 컨텍스트를 측정하는 방법을 사용할 수 있습니다. 이 방법에는 텍스트 문자열이 필요하며 측정 객체를 기반으로 제공된 텍스트의 글꼴을 반환하고 컨텍스트의 현재 텍스트에 할당됩니다.
html5 캔버스의 텍스트 메트릭을 얻으려면 measuretext ()의 캔버스 컨텍스트 방법을 사용할 수 있습니다. 이 방법에는 텍스트 문자열이 필요하며 측정 객체를 기반으로 제공된 텍스트의 글꼴을 반환하고 컨텍스트의 현재 텍스트에 할당됩니다.
현재 텍스트의 너비는 MeasureText () 메소드의 유일한 척도입니다. 높은 메트릭 텍스트 시스템은 현재 지원되지 않습니다.
<! doctype html>
<html>
<헤드>
<스타일>
몸 {
여백 : 0px;
패딩 : 50px;
}
#mycanvas {
국경 : 1px Solid #9C9898;
}
</스타일>
<cript>
Window.onload = function () {
var canvas = document.getElementById (mycanvas);
var context = canvas.getContext (2d);
var x = canvas.width / 2;
var y = canvas.height / 2-10;
var text = Hello World!;
context.font = 30pt calibri;
context.textalign = 센터;
Context.FillStyle = 파란색;
context.filltext (텍스트, x, y);
// 텍스트 메트릭을 얻습니다
var metrics = context.measuretext (텍스트);
var width = metrics.width;
context.font = 20pt calibri;
context.textalign = 센터;
Context.FillStyle = #555;
context.filltext (( + width + px wide), x, y + 40);
};
</스크립트>
</head>
<Body OnMousEdown = Return False;>
<canvas id = mycanvas 너비 = 578 높이 = 200>
</캔버스>
</body>
</html>