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


Posted in Javascript onOctober 19, 2018

有时候我们在使用Canvas绘制一段文本时,会需要通过measureText()方法获取文本的宽度,例如:

创建canvas标签

<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返回的其实是一个TextMetrics对象,它包含了文本的宽度,MDN上的解释如下:

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

在微信小程序现在的版本(v2.13.7)中,小程序的canvas还不支持measureText,所以我自己写了个类似于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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
javascript 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
JavaScript写的一个自定义弹出式对话框代码
Jan 17 Javascript
js数组Array sort方法使用深入分析
Feb 21 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 Javascript
第一次接触神奇的前端框架vue.js
Dec 01 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
微信小程序动态添加和删除组件的现实
Feb 28 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 #Javascript
clipboard在vue中的使用的方法示例
Oct 19 #Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 #Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 #Javascript
js中自定义react数据验证组件实例详解
Oct 19 #Javascript
值得收藏的八个常用的js正则表达式
Oct 19 #Javascript
深入理解移动前端开发之viewport
Oct 19 #Javascript
You might like
桌面中心(二)数据库写入
2006/10/09 PHP
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
javascript 日期常用的方法
2009/11/11 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
浅析Python 中整型对象存储的位置
2016/05/16 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
圣诞节红领巾广播稿
2014/02/03 职场文书
师恩难忘教学反思
2014/04/27 职场文书
中华美德颂演讲稿
2014/05/20 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python
Linux安装apache服务器的配置过程
2021/11/27 Servers