计算文本宽度

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

比如，我们想给文本绘制个背景或者边框，这时候就需要知道确切的文本宽度了。

canvas 为我们提供了计算文本宽度的：measureText ，返回 TextMetrics 对象，包含关于文本尺寸的信息，里面就有文本宽度。

我们看案例：

<!DOCTYPE html>
<html>
<head>
	< charset="utf-8">
	<title>网Wiki</title>
    <style>
        #imooc{
            border:px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="imooc">您的浏览器 HTML5 canvas </canvas>
    <script>
		const canvas = document.getElementById('imooc');
		canvas.width=;
		canvas.height=;
		const ctx = canvas.getContext('2d');
		
		function drawBtn(str, x, y ){
			var w = ctx.measureText(str).width; // 绘制文本的宽度
			var h = parseInt(ctx.font)
			ctx.fillStyle="#456795";
			ctx.fillRect(x,y,w+,h+)
			ctx.fillStyle="#fff";
			ctx.textBaseline="hanging"
			ctx.fillText(str,x,y)
		}
		
		ctx.font="16px 微软雅黑";
		drawBtn("Wiki",,)
		
		ctx.font="18px 微软雅黑";
		drawBtn("Imooc教程 Hello World", , )
		
		ctx.font="20px 微软雅黑";
		drawBtn("确认", , )
	</script>
<body>
</html>
@H_455_@

运行结果：

上面案例中，我们封装了，可以绘制自适应大小的按钮，让我们拆分讲解一下主要。

先看绘制按钮的封装 drawBtn，传入了三个参数，分别是绘制文本以及绘制文本的起点坐标 (x, y)。

function drawBtn(str, x, y ){
	...
}
@H_455_@
（1）到绘制文本的宽度和高度，其实文本的高度就是设置的文本字体的大小值，这里我们用了小技巧拿到了设置的文本大小。
 var w = ctx.measureText(str).width;  // 到绘制文本的宽度w
 var h = parseInt(ctx.font) // 通过小技巧到了文本高度h
@H_455_@
（2）设置按钮背景为 #456795 这个颜色，并且绘制了矩形，这里矩形坐标我们向左上方移动了10个像素，目的是给按钮内边距，美观一些，因为左侧有10个像素边距，右侧也有10个像素边距，所以我们给背景的矩形框的长度了20个像素，高度同理，也了20个像素。
 ctx.fillStyle="#456795";
 ctx.fillRect(x-10,y-10,w+20,h+20)
@H_455_@
（3）设置的颜色为白色，把的基线设置为 hanging，这样做的目的是将文本和基线对齐，方便计算，我们也可以设置为其他值，不过计算起来会比较麻烦。
 	ctx.fillStyle="#fff";
 	ctx.textBaseline="hanging"
@H_455_@
（4）绘制文本。
 	ctx.fillText(str,x,y)
@H_455_@

（1）到绘制文本的宽度和高度，其实文本的高度就是设置的文本字体的大小值，这里我们用了小技巧拿到了设置的文本大小。

 var w = ctx.measureText(str).width;  // 到绘制文本的宽度w
 var h = parseInt(ctx.font) // 通过小技巧到了文本高度h
@H_455_@
（2）设置按钮背景为 #456795 这个颜色，并且绘制了矩形，这里矩形坐标我们向左上方移动了10个像素，目的是给按钮内边距，美观一些，因为左侧有10个像素边距，右侧也有10个像素边距，所以我们给背景的矩形框的长度了20个像素，高度同理，也了20个像素。
 ctx.fillStyle="#456795";
 ctx.fillRect(x-10,y-10,w+20,h+20)
@H_455_@
（3）设置的颜色为白色，把的基线设置为 hanging，这样做的目的是将文本和基线对齐，方便计算，我们也可以设置为其他值，不过计算起来会比较麻烦。
 	ctx.fillStyle="#fff";
 	ctx.textBaseline="hanging"
@H_455_@
（4）绘制文本。
 	ctx.fillText(str,x,y)
@H_455_@

（2）设置按钮背景为 #456795 这个颜色，并且绘制了矩形，这里矩形坐标我们向左上方移动了10个像素，目的是给按钮内边距，美观一些，因为左侧有10个像素边距，右侧也有10个像素边距，所以我们给背景的矩形框的长度了20个像素，高度同理，也了20个像素。

ctx.fillStyle="#456795"; ctx.fillRect(x-10,y-10,w+20,h+20)@H_455_@

（3）设置的颜色为白色，把的基线设置为 hanging，这样做的目的是将文本和基线对齐，方便计算，我们也可以设置为其他值，不过计算起来会比较麻烦。

 	ctx.fillStyle="#fff";
 	ctx.textBaseline="hanging"
@H_455_@
（4）绘制文本。
 	ctx.fillText(str,x,y)
@H_455_@

 	ctx.fillStyle="#fff";
 	ctx.textBaseline="hanging"
@H_455_@
（4）绘制文本。
 	ctx.fillText(str,x,y)
@H_455_@

（4）绘制文本。

 	ctx.fillText(str,x,y)
@H_455_@

设置字体大小为16像素，封装绘制。

	ctx.font="16px 微软雅黑";
	drawBtn("Wiki",40,40)
@H_455_@

设置字体大小为18像素，封装绘制。

	ctx.font="18px 微软雅黑";
	drawBtn("Imooc教程 Hello World", 40, 90)
@H_455_@

设置字体大小为20像素，封装绘制。

	ctx.font="20px 微软雅黑";
	drawBtn("确认", 40, 140)
@H_455_@

本小节我们学习了 measureText , 它们是 canvas 2D API 提供的绘制文本的相关的，该返回 TextMetrics 对象，该对象包含关于文本尺寸的信息，里面就有文本宽度。

TextMetrics.width 说明

语法：

ctx.measureText(value);

变量说明：

本小节我们主要学习了利用 measureText 绘制文本宽度。

←文本垂直对齐方式

绘制状态存储→

计算文本宽度

您的鼓励是对我最大的支持