第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

水車_ · 更新于 2021-02-23

計算文本寬度

1. 前言

有時候在繪制一行文本前可能想事先知道它的寬度，為什么會有這種需求呢？

比如，我們想給文本繪制個背景或者邊框，這時候就需要知道確切的文本寬度了。

2. 計算文本寬度

canvas 為我們提供了一個計算文本寬度的方法：measureText 方法，方法返回一個 TextMetrics 對象，包含關于文本尺寸的信息，里面就有文本寬度。

我們看一個案例：

實例演示
預覽 復制
復制成功！
<!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 標簽</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("確認", 40, 140)
	</script>
<body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結果：

上面案例中，我們封裝了一個函數(shù)，可以繪制自適應大小的按鈕，讓我們拆分講解一下主要代碼。

  1. 先看繪制按鈕的封裝函數(shù) drawBtn，函數(shù)傳入了三個參數(shù)，分別是繪制文本以及繪制文本的起點坐標 (x, y)。

    function drawBtn(str, x, y ){
	...
}

    （1）獲取到繪制文本的寬度和高度，其實文本的高度就是設置的文本字體的大小值，這里我們用了一個小技巧拿到了設置的文本大小。

     var w = ctx.measureText(str).width;  // 獲取到繪制文本的寬度w
 var h = parseInt(ctx.font) // 通過小技巧獲取到了文本高度h

    （2）設置按鈕背景為 #456795 這個顏色，并且繪制了一個矩形，這里矩形坐標我們向左上方移動了10個像素，目的是給按鈕添加一個內(nèi)邊距，美觀一些，因為左側(cè)有10個像素邊距，右側(cè)也有10個像素邊距，所以我們給背景的矩形框的長度增加了20個像素，高度同理，也增加了20個像素。

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

    （3）設置文字的顏色為白色，把文字的基線設置為 hanging，這樣做的目的是將文本左上角和基線對齊，方便計算，我們也可以設置為其他值，不過計算起來會比較麻煩。

     	ctx.fillStyle="#fff";
 	ctx.textBaseline="hanging"

    （4）繪制文本。

     	ctx.fillText(str,x,y)

  2. 設置字體大小為16像素，調(diào)用封裝函數(shù)繪制文字。

    	ctx.font="16px 微軟雅黑";
	drawBtn("慕課Wiki",40,40)

  3. 設置字體大小為18像素，調(diào)用封裝函數(shù)繪制文字。

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

  4. 設置字體大小為20像素，調(diào)用封裝函數(shù)繪制文字。

    	ctx.font="20px 微軟雅黑";
	drawBtn("確認", 40, 140)

3. 方法整理

本小節(jié)我們學習了 measureText 方法 , 它們是 canvas 2D API 提供的獲取繪制文本的相關屬性的方法，該方法返回一個 TextMetrics 對象，該對象包含關于文本尺寸的信息，里面就有文本寬度。

3.1 文本寬度 TextMetrics.width

TextMetrics.width 說明

  • TextMetrics.width 是當前要繪制文本在畫布上將要占用的寬度。

語法：

ctx.measureText(value);

變量說明：

屬性名 類型 說明
value String 將要繪制的文本字符串。

4. 總結

本小節(jié)我們主要學習了利用 measureText 方法獲取繪制文本寬度。