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 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
Element Backtop回到顶部的具体使用
Jul 27 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
php实现水仙花数的4个示例分享
2014/04/08 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
php查询内存信息操作示例
2019/05/09 PHP
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
jQuery实现简易聊天框
2020/02/08 jQuery
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
Python验证企业工商注册码
2015/10/25 Python
浅析Python编写函数装饰器
2016/03/18 Python
EM算法的python实现的方法步骤
2018/01/02 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
django基础学习之send_mail功能
2019/08/07 Python
python super的使用方法及实例详解
2019/09/25 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
教师个人自我鉴定
2014/02/08 职场文书
学校安全生产承诺书
2014/05/23 职场文书
安全目标责任书
2014/07/22 职场文书
合作协议书格式
2014/08/19 职场文书
企业授权委托书范本
2014/09/22 职场文书
2014年团支部工作总结
2014/11/17 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers