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

更新時(shí)間：2018年10月19日 11:59:41 作者：4fun

有時(shí)候我們在使用Canvas繪制一段文本時(shí)，會需要通過measureText()方法獲取文本的寬度，本文主要介紹了在小程序Canvas中使用measureText的方法示例，需要的朋友可以參考下

有時(shí)候我們在使用Canvas繪制一段文本時(shí)，會需要通過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對象，它包含了文本的寬度，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方法，通過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;
}

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

您可能感興趣的文章:

相關(guān)文章

前端設(shè)計(jì)師們最常用的JS代碼匯總
本文給大家整理匯總了一些做前端經(jīng)常需要用的到JavaScript代碼片段，非常的全面，有需要的小伙伴可以參考下
2016-09-09
ES6與CommonJS中的模塊處理的區(qū)別
ES6和CommonJS都有自己的一套處理模塊化代碼的措施，這篇文章主要介紹了ES6與CommonJS中的模塊處理的區(qū)別，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-06-06
javascript獲取以及設(shè)置光標(biāo)位置
本文介紹了javascript獲取以及設(shè)置光標(biāo)位置的方法，具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02
js檢驗(yàn)密碼強(qiáng)度(低中高)附圖
注冊模塊中輸入密碼需要顯示密碼強(qiáng)度（低中高）本例將做的效果給大家分享下
2014-06-06
js中top的作用深入剖析
本篇文章主要是對js中top的作用進(jìn)行了深入的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-03-03
前端獲取用戶地理定位的方法及一些注意事項(xiàng)
這篇文章主要介紹了移動端和PC端在使用定位過程中需要注意的事項(xiàng),包括系統(tǒng)GPS打開、定位權(quán)限、頁面授權(quán)等,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-02-02
JavaScript基礎(chǔ)篇（6）之函數(shù)表達(dá)式閉包
這篇文章主要介紹了javascript基礎(chǔ)篇（6）之函數(shù)表達(dá)式閉包的相關(guān)資料,需要的朋友可以參考下
2015-12-12
JavaScript實(shí)現(xiàn)掃雷小游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)掃雷小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06
微信小程序中選中手機(jī)相冊圖片上傳到服務(wù)器的步驟
這篇文章主要介紹了微信小程序中選中手機(jī)相冊圖片上傳到服務(wù)器的步驟,現(xiàn)圖片上傳我們需要使用chooseImg和uploadFile這兩個(gè)api,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
2024-04-04
fiv.js實(shí)現(xiàn)flv文件blob流實(shí)時(shí)播放的項(xiàng)目實(shí)踐
本文主要介紹了fiv.js實(shí)現(xiàn)flv文件blob流實(shí)時(shí)播放的項(xiàng)目實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04