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群