日 | 一 | 二 | 三 | 四 | 五 | 六 |
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 | 26 | 27 | 28 |
29 | 30 |
[复位日记]
网站统计
·今日访问 : 94
·页面点击 : 99
·当前在线 : 9
2025年6月18日 星期三[阅读 7]
通过离线canvas获取一行文本的宽高数据:
- function getTxtSize(txt, font) {
- const c = document.createElement('canvas');
- const ct = c.getContext('2d');
- ct.font = font;
- const metrics = ct.measureText(str);
- const width = metrics.width;
- const height = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
- return { width: width, height: height };
- };
参数:
- txt : 要输出的文本
- font : 字体设置,例如 : 'bold 80px sans-serif'
返回的width和height很抠,实实在在的文本宽高,实际使用时应加值留边。
2025': 前一则 下一则
发表评论: