在小程序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 相关文章推荐
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
JS控制表单提交的方法
Jul 09 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
JavaScript中的this到底是什么(一)
Dec 09 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
微信小程序中转义字符的处理方法
Mar 28 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
JavaScript console的使用方法实例分析
Apr 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
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
php输入数据统一类实例
2015/02/23 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
JavaScript OOP类与继承
2009/11/15 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
python实现挑选出来100以内的质数
2015/03/24 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
Python绘图实现显示中文
2019/12/04 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
临床医学大学生求职信
2013/09/28 职场文书
一月红领巾广播稿
2014/02/11 职场文书
对标管理实施方案
2014/03/12 职场文书
法人代表任命书范本
2014/06/05 职场文书
品质口号大全
2014/06/17 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
基于python实现银行管理系统
2021/04/20 Python
Python保存并浏览用户的历史记录
2022/04/29 Python