亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間：2019年02月02日 09:52:20   作者：前端林三哥  
這篇文章主要介紹了JS使用canvas中的measureText方法測量字體寬度,結(jié)合實例形式分析了canvas的measureText方法相關(guān)使用技巧,需要的朋友可以參考下

本文實例講述了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";//設(shè)置字體大小和字體，這一步很重要，直接影響了測量結(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>

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

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

相關(guān)文章

  • JavaScript中Promise的使用方法實例

    JavaScript中Promise的使用方法實例

    現(xiàn)在不會用Promise都不好意思說自己是前端,下面這篇文章主要給大家介紹了關(guān)于JavaScript中Promise使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-05-05
  • 情人節(jié)之禮 js項鏈效果

    情人節(jié)之禮 js項鏈效果

    情人節(jié)馬上要到了，為情人節(jié)奉獻一份禮物哈。。。一定要支持CSS3渲染的瀏覽器
    2012-02-02
  • 微信小程序表單彈窗實例

    微信小程序表單彈窗實例

    這篇文章主要為大家詳細介紹了微信小程序表單彈窗實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-07-07
  • JavaScript六種常見的繼承方法分享

    JavaScript六種常見的繼承方法分享

    繼承是面向?qū)ο缶幊讨械囊粋€重要概念,它允許一個對象（子類或派生類）獲取另一個對象（父類或基類）的屬性和方法,在 JavaScript 中,有多種方式可以實現(xiàn)繼承,本文將給大家介紹六種常見的JavaScript繼承方法,需要的朋友可以參考下
    2023-09-09
  • javascipt:filter過濾介紹及使用

    javascipt:filter過濾介紹及使用

    filter是new一個新的array，這篇文章主要介紹了javascipt filter過濾介紹及使用,需要的朋友可以參考下
    2014-09-09
  • setTimeout學(xué)習(xí)小結(jié)

    setTimeout學(xué)習(xí)小結(jié)

    本文主要介紹了setTimeout原理；setTimeout(function(){..},0)的意義；setTimeout的this指向和參數(shù)問題。具有很好的參考價值，下面跟著小編一起來看下吧
    2017-02-02
  • 根據(jù)配置文件加載js依賴模塊

    根據(jù)配置文件加載js依賴模塊

    這篇文章主要介紹了根據(jù)配置文件加載js依賴模塊,解決方法是筆者自己的思路，拋磚引玉，需要的朋友可以參考下
    2014-12-12
  • JavaScript中 DOM操作方法小結(jié)

    JavaScript中 DOM操作方法小結(jié)

    本篇文章主要介紹了JavaScript中 DOM操作方法小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-04-04
  • Web表單提交之disabled問題js解決方法

    Web表單提交之disabled問題js解決方法

    這篇文章主要介紹了Web表單提交之disabled問題js解決方法,分析了通過js解決保存值也能保留用戶不能輸入的功能,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-01-01
  • JavaScript 中文轉(zhuǎn)拼音實現(xiàn)代碼 有些bug

    JavaScript 中文轉(zhuǎn)拼音實現(xiàn)代碼 有些bug

    在做項目時候遇到一個小小的顯示客戶部門名稱（拼音）的業(yè)務(wù)，就是在部門名稱下有相應(yīng)的拼音，而在現(xiàn)有的數(shù)據(jù)庫中沒有相應(yīng)字段，并且部門數(shù)量比較多，添加起來比較費時，就想能否在js中實現(xiàn)，在頁面中處理。
    2010-03-03

最新評論