JavaScript 基於HTML5 canvas 獲取文本佔用的像素寬度

• 2019 年 12 月 12 日
• 筆記

基於HTML5 canvas 獲取文本佔用的像素寬度

直接上程式碼

// 獲取單行文本的像素寬度  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"'  );