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"'

);