在小程序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 getElementsByClassName函数
Apr 01 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
Apr 23 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
React性能优化系列之减少props改变的实现方法
Jan 17 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 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数组应该有多大的分析
2009/07/30 PHP
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
asp批量修改记录的代码
2008/06/25 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
python对于requests的封装方法详解
2019/01/03 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
wxpython+pymysql实现用户登陆功能
2019/11/19 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
Python 防止死锁的方法
2020/07/29 Python
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
2014新年寄语
2014/01/20 职场文书
活动总结模板
2014/05/09 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
Python绘制分类图的方法
2021/04/20 Python
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js