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); // 測量文字

returndimension.width;

        }

使用

let centerTextPixelWidth = this.getTextPixelWith(

    '想要獲取像素寬度的文本',

    '13px "Microsoft YaHei"'

);