使用measureText测量文本宽度

该文章由 leevare 发布于 ,归类于 Javascript

经常遇到的情况是在画图的时候要根据字体的长度设置svg中不同元素的宽度,但是在内容渲染之前是获取不到宽度的,这里使用measureText来提前获取宽度。

使用方式很简单

let canvas = document.createElement('canvas');
canvas.font = '14px Microsoft YaHei';
let ctx = canvas.getContext('2d');
const width = ctx.measureText('你好,世界').width;

这里的width就为14像素的“你好,世界”渲染后的宽度。

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒