在小程序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学习笔记6 prototype的提出
Jan 11 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
JavaScript入门基础
Aug 12 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
Jan 14 Javascript
D3.js实现柱状图的方法详解
Sep 21 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
JS将时间秒转换成天小时分钟秒的字符串
Jul 10 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
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
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
菜单效果
2006/10/14 Javascript
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
python计算N天之后日期的方法
2015/03/31 Python
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
Django中ORM的基本使用教程
2020/12/22 Python
曼城官方网上商店:Manchester City
2019/09/10 全球购物
材料化学专业求职信
2014/07/15 职场文书
党员对照检查材料
2014/09/22 职场文书
催款函范文
2015/06/24 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
Redis 常见使用场景
2021/08/30 Redis