Canvas 预测文本宽度 measureText()

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

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

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

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

Canvas measureText() 方法

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

语法

ctx.measureText(text);
参数 说明
text 需要测量的文本

返回

TextMetrics 对象

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;

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

运行结果如下

Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.