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 相关文章推荐
JS调用页面表格导出excel示例代码
Mar 18 Javascript
js怎么覆盖原有方法实现重写
Sep 04 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
vue实现节点增删改功能
Sep 26 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
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
用PHP创建PDF中文文档
2006/10/09 PHP
第十节--抽象方法和抽象类
2006/11/16 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
js异步加载的三种解决方案
2013/03/04 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
js clearInterval()方法的定义和用法
2015/11/11 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
Python工程师面试题 与Python Web相关
2016/01/14 Python
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
python list格式数据excel导出方法
2018/10/31 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
python中remove函数的踩坑记录
2021/01/04 Python
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
《最大的麦穗》教学反思
2014/04/17 职场文书
三方协议书
2015/01/27 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
详细介绍python类及类的用法
2021/05/31 Python