在小程序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 相关文章推荐
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
jQuery - css() 方法示例详解
Jan 16 Javascript
Javascript加载速度慢的解决方案
Mar 11 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
Vue多系统切换实现方案
Jun 05 Javascript
JS highcharts动态柱状图原理及实现
Oct 16 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删除目录及目录下所有文件的方法详解
2013/06/06 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
详解PHP归并排序的实现
2016/10/18 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
python标准日志模块logging的使用方法
2013/11/01 Python
python去除所有html标签的方法
2015/05/05 Python
Python实现统计代码行的方法分析
2017/07/12 Python
python去除文件中重复的行实例
2018/06/29 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
python实现移位加密和解密
2019/03/22 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
俞敏洪一分钟演讲稿
2014/08/26 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
起诉书格式范文
2015/05/20 职场文书
理想国读书笔记
2015/06/25 职场文书