js canvas计算文字宽度

文本渲染函数：计算文本在canvas上的实际宽度,

最新推荐文章于 2024-06-02 00:26:11 发布

原创最新推荐文章于 2024-06-02 00:26:11 发布 · 758 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

该篇文章介绍了如何使用JavaScript的getActualWidthOfChats函数，通过canvas的2DAPI计算给定文本在特定字体和大小下的实际宽度，确保文本渲染时的准确性。

function getActualWidthOfChats(text,options={}) {
	const {size=13, family = 'Mircrosoft YaHei'} = options
	const canvas = document.createElement('canvas')
	const ctx = canvas.getContext('2d')
	ctx.font = `${size}px ${family}`
	const metrics = ctx.measureText(text)
	const actual = Math.abs(metrics.actualBoundingBoxLeft+Math.abs(metrics.actualBoundingBoxRight))
	return  Math.max(metrics.width, actual)
}