在小程序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 打印页面代码
Mar 24 Javascript
Extjs学习笔记之六 面版
Jan 08 Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
jquery $.each()使用探讨
Sep 23 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
绑定回车enter事件代码
May 18 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 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 闭包特性在实际应用中的问题
2009/10/30 PHP
PHP容易忘记的知识点分享
2013/04/30 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
深入理解PHP内核(一)
2015/11/10 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
js登录弹出层特效
2014/03/07 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
2016/06/30 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
js评分组件使用详解
2017/06/06 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
jQuery实现tab栏切换效果
2020/12/22 jQuery
Python验证企业工商注册码
2015/10/25 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
scrapy爬虫实例分享
2017/12/28 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
如何保障Web服务器安全
2014/05/05 面试题
经理秘书求职自荐信范文
2014/03/23 职场文书
终止合同协议书
2014/04/17 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
上课说话检讨书500字
2014/11/01 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android