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 相关文章推荐
My Desktop :) 桌面式代码
Dec 29 Javascript
jQuery 常见学习网站与参考书
Nov 09 Javascript
js null undefined 空区别说明
Jun 13 Javascript
js中将字符串转换成json的三种方式
Jan 12 Javascript
中止javascript执行的方法
Feb 14 Javascript
jQuery简单实现日历的方法
May 04 Javascript
js控制div弹出层实现方法
May 11 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
创建echart多个联动的示例代码
Nov 23 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
在vue中使用jsonp进行跨域请求接口操作
Oct 29 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面向对象编程快速入门
2006/12/14 PHP
PHP 程序授权验证开发思路
2009/07/09 PHP
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
深入解析php中的foreach问题
2013/06/30 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Django框架中的对象列表视图使用示例
2015/07/21 Python
Python文件的读写和异常代码示例
2017/10/31 Python
python合并同类型excel表格的方法
2018/04/01 Python
python绘制直线的方法
2018/06/30 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
Python3的socket使用方法详解
2020/02/18 Python
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
大二自我鉴定
2014/01/31 职场文书
爱情保证书大全
2014/04/29 职场文书
学习演讲稿范文
2014/05/10 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
从事会计工作年限证明
2015/06/23 职场文书
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL