JS使用canvas中的measureText方法測量字體寬度示例

2019-11-19 12:10:46

字體：大中小

來源：轉載

供稿：網友

本文實例講述了JS使用canvas中的measureText方法測量字體寬度。分享給大家供大家參考，具體如下：

工作項目中用到的東西，要限制一個容器的寬度，超過了這個寬度就要顯示展開按鈕，點擊展開按鈕要全部展示出來，可以用css的加省略號的那個，但是有時候這個還不行，我就自己想辦法，突然想到canvas中有個measureText函數(shù)可以測量字體的寬度，于是我就想著用這個函數(shù)來測出句子的寬度來，然后和容器的寬度進行比較，這樣就可以了，那我就來寫個demo來演示一下如何測量

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title></head><body>  <script type="text/javascript">    var text = "林三哥超級帥";    var canvas = document.createElement('canvas')//首先創(chuàng)建一個canvas標簽    var ctx = canvas.getContext("2d");//把canvas的畫筆給調出來      ctx.font="30px Arial";//設置字體大小和字體，這一步很重要，直接影響了測量結果，因為14px和16px的字體的寬度是不一樣的      var width = ctx.measureText(text).width;//開始測量字體的寬度      console.log('text的寬度為' + width);  </script></body></html>

使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun測試上述代碼，可得如下運行結果：