HTML canvas measureText() 方法

定义和用法

measureText() 方法返回包含一个对象,该对象包含以像素计的指定字体宽度。

提示:如果您需要在文本向画布输出之前,就了解文本的宽度,那么请使用该方法。

实例

在画布上输出文本之前,检查字体的宽度:

您的浏览器不支持HTML5 canvas标签。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
var txt="Hello World"
ctx.fillText("width:" + ctx.measureText(txt).width,10,50)
ctx.fillText(txt,10,100);

직접 시도해 보세요

문법

context.measureText(text).width;

파라미터 값

파라미터 설명
text 측정할 텍스트.

브라우저 지원

표의 숫자는 해당 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

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