HTML canvas measureText() 方法

定义和用法

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

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

实例

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

Your browser does not support the HTML5 canvas tag.

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>