在小程序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 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
asp 取文本框名称代码
Dec 02 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 Javascript
DOM 事件流详解
Jan 20 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 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 memcache扩展的三种安装方法
2009/04/26 PHP
PHP中的string类型使用说明
2010/07/27 PHP
PHP入门学习笔记之一
2010/10/12 PHP
php链式操作的实现方式分析
2019/08/12 PHP
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
一个简单的javascript类定义例子
2009/09/12 Javascript
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
vue快捷键与基础指令详解
2017/06/01 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
python中self原理实例分析
2015/04/30 Python
python字典的常用操作方法小结
2016/05/16 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
HTML中meta标签及Keywords
2020/04/15 HTML / CSS
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
简单租房协议书
2014/10/21 职场文书
五年级学生评语大全
2014/12/26 职场文书
2015年化验员工作总结
2015/04/10 职场文书
小学英语教学反思范文
2016/02/15 职场文书
2019求职信大礼包
2019/05/15 职场文书
Nginx的基本概念和原理
2022/03/21 Servers