水車_ ·計算文本寬度
1. 前言
有時候在繪制一行文本前可能想事先知道它的寬度，為什么會有這種需求呢？
比如，我們想給文本繪制個背景或者邊框，這時候就需要知道確切的文本寬度了。
2. 計算文本寬度
canvas 為我們提供了一個計算文本寬度的方法：measureText 方法，方法返回一個 TextMetrics 對象，包含關(guān)于文本尺寸的信息，里面就有文本寬度。
我們看一個案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕課網(wǎng)Wiki</title>
<style>
#imooc{
border:1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc">您的瀏覽器不支持 HTML5 canvas 標(biāo)簽</canvas>
<script>
const canvas = document.getElementById('imooc');
canvas.width=400;
canvas.height=240;
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-10,y-10,w+20,h+20)
ctx.fillStyle="#fff";
ctx.textBaseline="hanging"
ctx.fillText(str,x,y)
}
ctx.font="16px 微軟雅黑";
drawBtn("慕課Wiki",40,40)
ctx.font="18px 微軟雅黑";
drawBtn("Imooc教程 Hello World", 40, 90)
ctx.font="20px 微軟雅黑";
drawBtn("確認(rèn)", 40, 140)
</script>
<body>
</html>
運行結(jié)果：
上面案例中，我們封裝了一個函數(shù)，可以繪制自適應(yīng)大小的按鈕，讓我們拆分講解一下主要代碼。
-
先看繪制按鈕的封裝函數(shù)
drawBtn，函數(shù)傳入了三個參數(shù)，分別是繪制文本以及繪制文本的起點坐標(biāo) (x, y)。function drawBtn(str, x, y ){ ... }（1）獲取到繪制文本的寬度和高度，其實文本的高度就是設(shè)置的文本字體的大小值，這里我們用了一個小技巧拿到了設(shè)置的文本大小。
var w = ctx.measureText(str).width; // 獲取到繪制文本的寬度w var h = parseInt(ctx.font) // 通過小技巧獲取到了文本高度h（2）設(shè)置按鈕背景為 #456795 這個顏色，并且繪制了一個矩形，這里矩形坐標(biāo)我們向左上方移動了10個像素，目的是給按鈕添加一個內(nèi)邊距，美觀一些，因為左側(cè)有10個像素邊距，右側(cè)也有10個像素邊距，所以我們給背景的矩形框的長度增加了20個像素，高度同理，也增加了20個像素。
ctx.fillStyle="#456795"; ctx.fillRect(x-10,y-10,w+20,h+20)（3）設(shè)置文字的顏色為白色，把文字的基線設(shè)置為
hanging，這樣做的目的是將文本左上角和基線對齊，方便計算，我們也可以設(shè)置為其他值，不過計算起來會比較麻煩。ctx.fillStyle="#fff"; ctx.textBaseline="hanging"（4）繪制文本。
ctx.fillText(str,x,y) -
設(shè)置字體大小為16像素，調(diào)用封裝函數(shù)繪制文字。
ctx.font="16px 微軟雅黑"; drawBtn("慕課Wiki",40,40) -
設(shè)置字體大小為18像素，調(diào)用封裝函數(shù)繪制文字。
ctx.font="18px 微軟雅黑"; drawBtn("Imooc教程 Hello World", 40, 90) -
設(shè)置字體大小為20像素，調(diào)用封裝函數(shù)繪制文字。
ctx.font="20px 微軟雅黑"; drawBtn("確認(rèn)", 40, 140)
3. 方法整理
本小節(jié)我們學(xué)習(xí)了 measureText 方法 , 它們是 canvas 2D API 提供的獲取繪制文本的相關(guān)屬性的方法，該方法返回一個 TextMetrics 對象，該對象包含關(guān)于文本尺寸的信息，里面就有文本寬度。
3.1 文本寬度 TextMetrics.width
TextMetrics.width 說明
- TextMetrics.width 是當(dāng)前要繪制文本在畫布上將要占用的寬度。
語法：
ctx.measureText(value);
變量說明：
| 屬性名 | 類型 | 說明 |
|---|---|---|
| value | String | 將要繪制的文本字符串。 |
4. 總結(jié)
本小節(jié)我們主要學(xué)習(xí)了利用 measureText 方法獲取繪制文本寬度。
2025 imooc.com All Rights Reserved |