快捷導(dǎo)航

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

更新時(shí)間：2019年02月02日 09:52:20 作者：前端林三哥

這篇文章主要介紹了JS使用canvas中的measureText方法測(cè)量字體寬度,結(jié)合實(shí)例形式分析了canvas的measureText方法相關(guān)使用技巧,需要的朋友可以參考下

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

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

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

使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，可得如下運(yùn)行結(jié)果：

這個(gè)是結(jié)果，30px的字有6個(gè)，寬度一共180，沒(méi)毛?。。?！哈哈！！

更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題：《JavaScript+HTML5特效與技巧匯總》、《JavaScript圖形繪制技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

讓瀏覽器崩潰的12行JS代碼(DoS攻擊分析及防御)
現(xiàn)在有一段12行的JavaScript代碼，可以讓firefox、chrome、safari瀏覽器崩潰，而且還能讓iphone重啟、安卓閃退，本文作者對(duì)于該12行代碼進(jìn)行了分析解讀并且提出了相應(yīng)的防御辦法，歡迎大家一同探討。有需要的朋友們可以參考借鑒。
2016-10-10
javascript動(dòng)態(tài)添加、修改、刪除對(duì)象的屬性與方法詳解
本篇文章主要是對(duì)javascript動(dòng)態(tài)添加、修改、刪除對(duì)象的屬性與方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-01-01
使用JavaScript實(shí)現(xiàn)ajax的實(shí)例代碼
實(shí)現(xiàn)ajax之前必須要?jiǎng)?chuàng)建一個(gè) XMLHttpRequest 對(duì)象。這是必須的。那么對(duì)使用js實(shí)現(xiàn)ajax的代碼感興趣的朋友可以參考下本文
2016-05-05
Javascript的表單驗(yàn)證-初識(shí)正則表達(dá)式
JavaScript 可用來(lái)在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。接下來(lái)通過(guò)本文給大家介紹Javascript的表單驗(yàn)證-初識(shí)正則表達(dá)式，對(duì)js表單驗(yàn)證正則表達(dá)式相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2016-03-03
js定時(shí)器setInterval、clearInterval的使用方法舉例
Javascript的setTimeOut和clearInterval函數(shù)應(yīng)用非常廣泛,它們都用來(lái)處理延時(shí)和定時(shí)任務(wù),這篇文章主要給大家介紹了關(guān)于js定時(shí)器setInterval、clearInterval使用方法的相關(guān)資料,需要的朋友可以參考下
2023-11-11
js canvas實(shí)現(xiàn)圓形流水動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了js canvas實(shí)現(xiàn)圓形流水動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
echarts實(shí)現(xiàn)中國(guó)地圖下鉆進(jìn)入下一級(jí)(地圖鉆取)
最近在學(xué)習(xí)echarts,今天就來(lái)介紹一下echarts實(shí)現(xiàn)中國(guó)地圖下鉆進(jìn)入下一級(jí),具有一定的參考價(jià)值,感興趣的可以了解一下
2023-08-08
關(guān)于B/S判斷瀏覽器斷開(kāi)的問(wèn)題討論
前臺(tái)頁(yè)面五分鐘，自己刷新一次，所以最多只有五分鐘的差錯(cuò)。
2008-10-10
什么是JavaScript中的結(jié)果值?
你知道JavaScript中的結(jié)果值是什么嗎？這篇文章主要介紹了JavaScript結(jié)果值，感興趣的小伙伴們可以參考一下
2016-10-10
JS實(shí)現(xiàn)title標(biāo)題欄文字不間斷滾動(dòng)顯示效果
這篇文章主要介紹了JS實(shí)現(xiàn)title標(biāo)題欄文字不間斷滾動(dòng)顯示效果,通過(guò)javascript時(shí)間函數(shù)定時(shí)操作動(dòng)態(tài)修改頁(yè)面元素實(shí)現(xiàn)滾動(dòng)效果,需要的朋友可以參考下
2016-09-09