本文實例講述了JS使用canvas中的measureText方法測量字體寬度。分享給大家供大家參考，具體如下：
工作項目中用到的東西，要限制一個容器的寬度，超過了這個寬度就要顯示展開按鈕，點擊展開按鈕要全部展示出來，可以用css的加省略號的那個，但是有時候這個還不行，我就自己想辦法，突然想到canvas中有個measureText函數可以測量字體的寬度，于是我就想著用這個函數來測出句子的寬度來，然后和容器的寬度進行比較，這樣就可以了，那我就來寫個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')//首先創建一個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測試上述代碼，可得如下運行結果：
這個是結果，30px的字有6個，寬度一共180，沒毛?。。。」?！
更多關于JavaScript相關內容還可查看本站專題：《JavaScript+HTML5特效與技巧匯總》、《JavaScript圖形繪制技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
