JS使用canvas中的measureText方法测量字体宽度示例


Posted in Javascript onFebruary 02, 2019

本文实例讲述了JS使用canvas中的measureText方法测量字体宽度。分享给大家供大家参考,具体如下:

工作项目中用到的东西,要限制一个容器的宽度,超过了这个宽度就要显示展开按钮,点击展开按钮要全部展示出来,可以用css的加省略号的那个,但是有时候这个还不行,我就自己想办法,突然想到canvas中有个measureText函数可以测量字体的宽度,于是我就想着用这个函数来测出句子的宽度来,然后和容器的宽度进行比较,这样就可以了,那我就来写个demo来演示一下如何测量

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script type="text/javascript">
    var text = "林三哥超级帅";
    var canvas = document.createElement('canvas')//首先创建一个canvas标签
    var ctx = canvas.getContext("2d");//把canvas的画笔给调出来
      ctx.font="30px Arial";//设置字体大小和字体,这一步很重要,直接影响了测量结果,因为14px和16px的字体的宽度是不一样的
      var width = ctx.measureText(text).width;//开始测量字体的宽度
      console.log('text的宽度为' + width);
  </script>
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行结果:

JS使用canvas中的measureText方法测量字体宽度示例

这个是结果,30px的字有6个,宽度一共180,没毛病!!!哈哈!!

更多关于JavaScript相关内容还可查看本站专题:《JavaScript+HTML5特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery 可排列的表实现代码
Nov 13 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 Javascript
jQuery中bind()方法用法实例
Jan 19 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
支付宝小程序tabbar底部导航
Nov 06 Javascript
vue中三级导航的菜单权限控制
Mar 31 Vue.js
介绍一下28个JS常用数组方法
May 06 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 #Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 #Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 #Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 #Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 #Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 #Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 #Javascript
You might like
phpQuery占用内存过多的处理方法
2013/11/13 PHP
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
理解javascript闭包
2015/12/15 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
javascript数据类型详解
2017/02/07 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
python学习手册中的python多态示例代码
2014/01/21 Python
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
django之常用命令详解
2016/06/30 Python
python实现两个文件夹的同步
2019/08/29 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
python dict乱码如何解决
2020/06/07 Python
基于Python实现简单学生管理系统
2020/07/24 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
医药大学生求职简历的自我评价
2013/10/17 职场文书
生产经理的自我评价分享
2013/11/07 职场文书
写给老婆的检讨书
2014/02/21 职场文书
终止劳动合同协议书
2014/10/05 职场文书
谢师宴邀请函
2015/02/02 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
简爱电影观后感
2015/06/10 职场文书
总结Pyinstaller打包的高级用法
2021/06/28 Python
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript