js获取文字的宽度

是阿臻

已于 2023-06-29 18:00:38 修改

阅读量889

点赞数

文章标签： javascript 前端 java

于 2023-06-29 16:26:24 首次发布

本文链接：https://blog.csdn.net/weixin_43191327/article/details/131459062

版权

通过canvas api 获取文字宽度

const getTextWidth = () => {
    const measureText = document.createElement("canvas");
    const ctx = measureText.getContext('2d')!
    return (name: string) => {
        const { width } = ctx.measureText(name);
        return width + 20 + 'px'
    }
}

const getWidthByName = getTextWidth()

js 方法(惰性加载)

// 惰性加载
    const getTextWidth2 = () => {
      let measureText 
      return (name) => {
        if (!measureText) {
          measureText = document.createElement("canvas");
        }
        const ctx = measureText.getContext('2d')
        const {width} = ctx.measureText(name);
        return width + 20 + 'px'
      }
    }
    const getWidthByName = getTextWidth2()
    console.log(getWidthByName('hello'));
    console.log(getWidthByName('hello'));