在小程序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 相关文章推荐
web性能优化之javascript性能调优
Dec 28 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
js实现网页收藏功能
Dec 17 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 Javascript
JS+CSS实现过渡特效
Jan 02 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实现文件安全下载
2006/10/09 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
php无限遍历目录示例
2014/02/21 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
vue打包相关细节整理(小结)
2018/09/28 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
Python读取键盘输入的2种方法
2015/06/16 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
Python计算IV值的示例讲解
2020/02/28 Python
Python super()方法原理详解
2020/03/31 Python
parser.add_argument中的action使用
2020/04/20 Python
医生实习工作总结的自我评价
2013/09/27 职场文书
大学新生军训个人的自我评价
2013/10/03 职场文书
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
幼儿园招生广告
2014/03/19 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
创先争优活动心得体会
2014/09/04 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
三八妇女节慰问信
2015/02/14 职场文书
优秀团员自我评价
2015/03/10 职场文书