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脚本
Dec 12 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
javascript 实现map集合
Apr 03 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
jQuery操作Table技巧大汇总
Jan 23 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
js实现京东轮播图效果
Jun 30 Javascript
layui 给数据表格加序号的方法
Aug 20 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
php中的一个中文字符串截取函数
2007/02/14 PHP
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
js left,right,mid函数
2008/06/10 Javascript
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
node网页分段渲染详解
2016/09/05 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
使用python加密自己的密码
2015/08/04 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
Python元组常见操作示例
2019/02/19 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
详解Django配置优化方法
2019/11/18 Python
Python requests模块cookie实例解析
2020/04/14 Python
Python正则表达式如何匹配中文
2020/05/27 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
教师自我评价范例
2013/09/24 职场文书
门卫人员岗位职责
2013/12/24 职场文书
小区门卫值班制度
2014/01/24 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
化学教育专业求职信
2014/07/08 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android