在小程序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 相关文章推荐
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 Javascript
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
Vue实现数据表格合并列rowspan效果
Nov 30 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
JS+DIV实现拖动效果
Feb 11 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 cache类代码(php数据缓存类)
2010/04/15 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
php实现网页端验证码功能
2017/07/11 PHP
php实现微信发红包功能
2018/07/13 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
mysql输出数据赋给js变量报unterminated string literal错误原因
2010/05/22 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
tensorflow实现简单的卷积神经网络
2018/05/24 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
Python实现手绘图效果实例分享
2020/07/22 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
资深财务管理人员自我评价
2013/09/22 职场文书
给学校的建议书范文
2014/05/15 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
导游词之张家界
2019/10/31 职场文书
Pandas 稀疏数据结构的实现
2021/07/25 Python