在小程序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 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
Jquery 学习笔记(一)
Oct 13 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 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小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
php给图片加文字水印
2015/07/31 PHP
PHP函数超时处理方法
2016/02/14 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
Python编码类型转换方法详解
2016/07/01 Python
python中解析json格式文件的方法示例
2017/05/03 Python
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
教师评优事迹材料
2014/01/10 职场文书
保密普查工作实施方案
2014/02/25 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
运动会跳远广播稿
2015/08/19 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
CSS的calc函数用法小结
2022/06/25 HTML / CSS