JavaScript 基于HTML5 canvas 获取文本占用的像素宽度

基于HTML5 canvas 获取文本占用的像素宽度

by:授客 QQ：1033553122

直接上代码

// 获取单行文本的像素宽度

getTextPixelWith(text, fontStyle) {

    var canvas = document.createElement("canvas"); // 创建 canvas 画布

    var context = canvas.getContext("2d"); // 获取 canvas 绘图上下文环境

    context.font = fontStyle; // 设置字体样式，使用前设置好对应的 font 样式才能准确获取文字的像素长度

    var dimension = context.measureText(text); // 测量文字

    return dimension.width;

}

使用      

let centerTextPixelWidth = this.getTextPixelWith(

    '想要获取像素宽度的文本',

    '13px "Microsoft YaHei"'

);

作者：授客

QQ：1033553122

全国软件测试QQ交流群：7156436

Git地址：https://gitee.com/ishouke

友情提示：限于时间仓促，文中可能存在错误，欢迎指正、评论！

作者五行缺钱，如果觉得文章对您有帮助，请扫描下边的二维码打赏作者，金额随意，您的支持将是我继续创作的源动力，打赏后如有任何疑问，请联系我!!!

           微信打赏                       

支付宝打赏                  全国软件测试交流QQ群