在小程序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(视频与PPT)
Dec 27 Javascript
了解一点js的Eval函数
Jul 26 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
javascript匿名函数中的'return function()'作用
Oct 15 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
php str_pad 函数用法简介
2009/07/11 PHP
PHP5函数小全(分享)
2013/06/06 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
php编写的简单页面跳转功能实现代码
2013/11/27 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
JavaScript 拖拉缩放效果
2008/12/10 Javascript
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
python变量的存储原理详解
2019/07/10 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
请解释流与文件有什么不同
2016/07/29 面试题
后勤自我鉴定
2013/10/13 职场文书
教师自荐信
2013/12/10 职场文书
客户答谢会致辞
2015/01/20 职场文书
初级职称评定工作总结
2015/08/13 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android