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

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

計(jì)算文本寬度

1. 前言

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

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

2. 計(jì)算文本寬度

canvas 為我們提供了一個(gè)計(jì)算文本寬度的方法：measureText 方法，方法返回一個(gè) TextMetrics 對(duì)象，包含關(guān)于文本尺寸的信息，里面就有文本寬度。

我們看一個(gè)案例：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!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>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

運(yùn)行結(jié)果：

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

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

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

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

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

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

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

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

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

    （4）繪制文本。

     	ctx.fillText(str,x,y)

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

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

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

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

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

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

3. 方法整理

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

3.1 文本寬度 TextMetrics.width

TextMetrics.width 說明

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

語(yǔ)法：

ctx.measureText(value);

變量說明：

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

4. 總結(jié)

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