本文實例講述了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.jb51.net/code/HtmlJsRun測試上述代碼，可得如下運行結果：
這個是結果，30px的字有6個，寬度一共180，沒毛?。。?！哈哈??！
更多關于JavaScript相關內容還可查看本站專題：《JavaScript+HTML5特效與技巧匯總》、《JavaScript圖形繪制技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
