Canvas 预测文本宽度 measureText() - Canvas 基础教程

有时候在绘制一行文本前可能想事先知道它的宽度，为什么会有这种需求呢？

比如，我们想给文本绘制个背景或者边框，很简单的，就比如绘制按钮

我们要绘制一个自适应文本大小的背景，不就需要事先知道文本的长度么？

Canvas 提供了方法 measureText() 用来计算在当前字体下的文本宽度

Canvas measureText() 方法

ctx.measureText() 方法返回一个 TextMetrics 对象，包含关于文本尺寸的信息（例如文本的宽度）

语法

ctx.measureText(text);

参数	说明
text	需要测量的文本

TextMetrics 对象

TextMetrics 对象有很多属性，不过大部分都不被支持，只有 width 属性是完全被支持的

好在我们只需要 width 属性

范例

我们使用 measureText() 计算字体为 22px 大小的微软雅黑的 "简单教程" 的文本宽度

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="500" height="100">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
ctx.font = "22px Microsoft YaHei";

var w = ctx.measureText("简单教程").width;

ctx.fillText("'简单教程' 文本的宽度为:" + w ,50,50);
</script>

运行结果如下

自适应大小的按钮

下面的给 "简单教程" 画了一个背景，其中内边距为 10;

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-2" width="500" height="100">
</canvas>

<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");
ctx.font = "22px Microsoft YaHei";

var w = ctx.measureText("简单教程").width;

//首先绘制一个背景，填充颜色为 `#4A90E2`
var btn_width = w + 20;
var btn_height = 22 + 20;
ctx.fillStyle="#4A90E2"
ctx.fillRect(50,50,btn_width,btn_height);

//设置按钮字体
ctx.font = "22px Microsoft YaHei";
ctx.fillStyle = "#ffffff"
ctx.textAlign ="center";
ctx.textBaseline = "middle";
ctx.fillText("简单教程" ,50+ btn_width/2,50+btn_height/2);
</script>

运行结果如下