欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

在小程序Canvas中使用measureText的方法示例

 更新時(shí)間：2018年10月19日 11:59:41   作者：4fun  
有時(shí)候我們?cè)谑褂肅anvas繪制一段文本時(shí)，會(huì)需要通過(guò)measureText()方法獲取文本的寬度，本文主要介紹了在小程序Canvas中使用measureText的方法示例，需要的朋友可以參考下

有時(shí)候我們?cè)谑褂肅anvas繪制一段文本時(shí)，會(huì)需要通過(guò)measureText()方法獲取文本的寬度，例如：

創(chuàng)建canvas標(biāo)簽

<canvas id="canvas"></canvas>

獲取一段文本的寬度

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var text = ctx.measureText('foo'); // TextMetrics object
text.width; // 16;

如上所示，measureText返回的其實(shí)是一個(gè)TextMetrics對(duì)象，它包含了文本的寬度，MDN上的解釋如下：

The CanvasRenderingContext2D.measureText() method returns a TextMetrics object that contains information about the measured text (such as its width for example).

在微信小程序現(xiàn)在的版本（v2.13.7）中，小程序的canvas還不支持measureText，所以我自己寫了個(gè)類似于measureText方法，通過(guò)canvas獲取文本的寬度，方法如下：

function measureText (text, fontSize=10) {
  text = String(text);
  var text = text.split('');
  var width = 0;
  text.forEach(function(item) {
    if (/[a-zA-Z]/.test(item)) {
      width += 7;
    } else if (/[0-9]/.test(item)) {
      width += 5.5;
    } else if (/\./.test(item)) {
      width += 2.7;
    } else if (/-/.test(item)) {
      width += 3.25;
    } else if (/[\u4e00-\u9fa5]/.test(item)) { //中文匹配
      width += 10;
    } else if (/\(|\)/.test(item)) {
      width += 3.73;
    } else if (/\s/.test(item)) {
      width += 2.5;
    } else if (/%/.test(item)) {
      width += 8;
    } else {
      width += 10;
    }
  });
  return width * fontSize / 10;
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 一些常用的JS功能函數(shù)(2009-06-04更新)

    一些常用的JS功能函數(shù)(2009-06-04更新)

    將 ClientMentInfo類改成了兼容IE6,IE7,IE8,Vista,Windows 7和Firefox
    2009-06-06
  • ECMAScript6輪播圖實(shí)踐知識(shí)總結(jié)

    ECMAScript6輪播圖實(shí)踐知識(shí)總結(jié)

    最近萌生了用ECMAScript6寫一個(gè)輪播圖的想法，以前就知道ECMAScript6，但是一直沒(méi)有學(xué)，現(xiàn)在終于下決心學(xué)了，本篇文章會(huì)總結(jié)在實(shí)踐中用到的ES6的知識(shí)。
    2016-08-08
  • swiper4實(shí)現(xiàn)移動(dòng)端導(dǎo)航切換

    swiper4實(shí)現(xiàn)移動(dòng)端導(dǎo)航切換

    這篇文章主要為大家詳細(xì)介紹了swiper4實(shí)現(xiàn)移動(dòng)端導(dǎo)航切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2019-09-09
  • JavaScript如何正確的寫代碼注釋

    JavaScript如何正確的寫代碼注釋

    這篇文章主要給大家介紹了關(guān)于JavaScript如何正確的寫代碼注釋的相關(guān)資料,注釋的作用是提高代碼的可讀性,幫助自己和別人閱讀和理解你所編寫的JavaScript代碼,注釋的內(nèi)容不會(huì)在網(wǎng)頁(yè)中顯示,需要的朋友可以參考下
    2023-10-10
  • js完美的div拖拽實(shí)例代碼

    js完美的div拖拽實(shí)例代碼

    文章實(shí)現(xiàn)的div拖拽程序可以根據(jù)按鈕來(lái)控制是要種拖拽方式與位置 ，下面希望有需要的朋友可參考
    2014-01-01
  • javascript 獲取HTMl文件指定元素的代碼

    javascript 獲取HTMl文件指定元素的代碼

    獲取HTMl文件制定的元素的實(shí)現(xiàn)代碼，需要的朋友可以參考下。
    2010-04-04
  • Echarts在Taro微信小程序開(kāi)發(fā)中的踩坑記錄

    Echarts在Taro微信小程序開(kāi)發(fā)中的踩坑記錄

    這篇文章主要介紹了Echarts在Taro微信小程序開(kāi)發(fā)中的踩坑記錄，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-11-11
  • hash特點(diǎn)、hashchange事件介紹及其常見(jiàn)應(yīng)用場(chǎng)景

    hash特點(diǎn)、hashchange事件介紹及其常見(jiàn)應(yīng)用場(chǎng)景

    淺析hash特點(diǎn)、hashchange事件介紹及其常見(jiàn)應(yīng)用場(chǎng)景（不同hash對(duì)應(yīng)不同事件處理、移動(dòng)端大圖展示狀態(tài)后退頁(yè)面問(wèn)題、原生輕應(yīng)用頭部后退問(wèn)題、移動(dòng)端自帶返回按鈕二次確認(rèn)問(wèn)題）,hashchange和popstate事件觸發(fā)條件
    2023-11-11
  • Express的路由詳解

    Express的路由詳解

    這篇文章主要介紹了Express的路由詳解的相關(guān)資料,需要的朋友可以參考下
    2015-12-12
  • Webpack優(yōu)化配置縮小文件搜索范圍

    Webpack優(yōu)化配置縮小文件搜索范圍

    這篇文章主要介紹了Webpack優(yōu)化-縮小文件搜索范圍的相關(guān)知識(shí)，文中較詳細(xì)的給大家介紹了可以優(yōu)化的途徑,需要的朋友可以參考下
    2017-12-12

最新評(píng)論