JS使用canvas中的measureText方法測量字體寬度示例
更新時間：2019年02月02日 09:52:20 作者：前端林三哥
這篇文章主要介紹了JS使用canvas中的measureText方法測量字體寬度,結(jié)合實例形式分析了canvas的measureText方法相關使用技巧,需要的朋友可以參考下
本文實例講述了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的畫筆給調(diào)出來
ctx.font="30px Arial";//設置字體大小和字體，這一步很重要，直接影響了測量結(jié)果，因為14px和16px的字體的寬度是不一樣的
var width = ctx.measureText(text).width;//開始測量字體的寬度
console.log('text的寬度為' + width);
</script>
</body>
</html>
使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，可得如下運行結(jié)果：
這個是結(jié)果，30px的字有6個，寬度一共180，沒毛?。。。」。?/p>
更多關于JavaScript相關內(nèi)容還可查看本站專題：《JavaScript+HTML5特效與技巧匯總》、《JavaScript圖形繪制技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設計有所幫助。
您可能感興趣的文章:
- 在小程序Canvas中使用measureText的方法示例
- js canvas實現(xiàn)寫字動畫效果
- JS+HTML5 Canvas實現(xiàn)簡單的寫字板功能示例
- js+html5實現(xiàn)canvas繪制鏤空字體文本的方法
- Javascript保存網(wǎng)頁為圖片借助于html2canvas庫實現(xiàn)
- javascript結(jié)合html5 canvas實現(xiàn)(可調(diào)畫筆顏色/粗細/橡皮)的涂鴉板
- JavaScript+html5 canvas實現(xiàn)本地截圖教程
- html5 canvas js(數(shù)字時鐘)實例代碼
- JS+Canvas 實現(xiàn)下雨下雪效果
- js使用html2canvas實現(xiàn)屏幕截取的示例代碼
相關文章
現(xiàn)在有一段12行的JavaScript代碼，可以讓firefox、chrome、safari瀏覽器崩潰，而且還能讓iphone重啟、安卓閃退，本文作者對于該12行代碼進行了分析解讀并且提出了相應的防御辦法，歡迎大家一同探討。有需要的朋友們可以參考借鑒。2016-10-10
javascript動態(tài)添加、修改、刪除對象的屬性與方法詳解
本篇文章主要是對javascript動態(tài)添加、修改、刪除對象的屬性與方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
實現(xiàn)ajax之前必須要創(chuàng)建一個 XMLHttpRequest 對象。這是必須的。那么對使用js實現(xiàn)ajax的代碼感興趣的朋友可以參考下本文2016-05-05
JavaScript 可用來在數(shù)據(jù)被送往服務器前對 HTML 表單中的這些輸入數(shù)據(jù)進行驗證。接下來通過本文給大家介紹Javascript的表單驗證-初識正則表達式，對js表單驗證正則表達式相關知識感興趣的朋友一起學習吧2016-03-03
js定時器setInterval、clearInterval的使用方法舉例
Javascript的setTimeOut和clearInterval函數(shù)應用非常廣泛,它們都用來處理延時和定時任務,這篇文章主要給大家介紹了關于js定時器setInterval、clearInterval使用方法的相關資料,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細介紹了js canvas實現(xiàn)圓形流水動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
echarts實現(xiàn)中國地圖下鉆進入下一級(地圖鉆取)
最近在學習echarts,今天就來介紹一下echarts實現(xiàn)中國地圖下鉆進入下一級,具有一定的參考價值,感興趣的可以了解一下2023-08-08
前臺頁面五分鐘，自己刷新一次，所以最多只有五分鐘的差錯。2008-10-10
你知道JavaScript中的結(jié)果值是什么嗎？這篇文章主要介紹了JavaScript結(jié)果值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了JS實現(xiàn)title標題欄文字不間斷滾動顯示效果,通過javascript時間函數(shù)定時操作動態(tài)修改頁面元素實現(xiàn)滾動效果,需要的朋友可以參考下2016-09-09