在小程序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 相关文章推荐
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
Apr 17 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 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开启安全模式后禁用的函数集合
2011/06/26 PHP
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
Python模块学习 re 正则表达式
2011/05/19 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
详解python之heapq模块及排序操作
2019/04/04 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
树莓派升级python的具体步骤
2020/07/05 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
申请任职学生会干部自荐书范文
2014/02/13 职场文书
个人投资合作协议书
2014/10/12 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
实现GO语言对数组切片去重
2022/04/20 Golang