Web►Front-End

[Front-End] Cavnas取得文字高度

前言

最近在利用Canvas製作類似修圖的App，在fillText的部分一直抓不到座標，最後才發現原來座標的基準點是文字的左下角而不是左上角，因此將文字的高度補回來就可以得到左上角的座標，但問題是要如何取得高度呢？

measureText

可以利用measureText取得文字的寬度，但無法取得高度。

做法

在網頁上新增兩個元素，透過verticalAlign讓物件對齊文字的底部，兩物件offsetTop的差值即是文字的高度。

程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var getTextHeight = function(font,size) {
	var text = document.createElement('span');
	text.style['fontFamily'] = font ;
	text.style['fontSize'] = size ;
	text.innerHTML = "Hg";
	var block = document.createElement('div') ;
	block.style.display ="inline-block";
	block.style.width = "1px" ;
	block.style.height = "0px" ; 
	var div = document.createElement('div');
	div.appendChild(text);
	div.appendChild(block)
	document.body.appendChild(div);
	var height = 0 ;
	try {
		block.style.verticalAlign = "bottom" ;
		height = block.offsetTop - text.offsetTop;
	} finally {
		div.remove();
	}
	return height;
}

參考

How can you find the height of text on an HTML canvas?