html5 canvas measuretext,HTML canvas measureText() 方法

在线示例

在画布上书写之前，请检查文本的宽度：您的浏览器,不支持HTML5 canvas标签.

示例html>

HTML canvas measureText() 方法使用-基础教程(nhooo.com)

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

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.font = "30px Arial";

var txt = "基础教程nhooo.com"

ctx.fillText("width:" + ctx.measureText(txt).width, 10, 50)

ctx.fillText(txt, 10, 100);

测试看看 ‹/›

浏览器兼容性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 measureText()

方法。

注意：Internet Explorer 8 及之前的版本不支持 元素。

定义和用法

measureText()方法返回一个对象，该对象包含指定文本的宽度(以像素为单位)。

提示：如果您需要在文本向画布输出之前，就了解文本的宽度，那么请使用该方法。JavaScript 语法：context.measureText(text).width;

参数值 参数描述

text要测量的文本。HTML canvas 参考手册