JS使用canvas中的measureText方法测量字体宽度示例
更新时间：2019年02月02日 09:52:20 作者：前端林三哥
这篇文章主要介绍了JS使用canvas中的measureText方法测量字体宽度,结合实例形式分析了canvas的measureText方法相关使用技巧,需要的朋友可以参考下
本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码，可得如下运行结果：
这个是结果，30px的字有6个，宽度一共180，没毛病！！！哈哈！！
更多关于JavaScript相关内容还可查看本站专题：《JavaScript+HTML5特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
现在不会用Promise都不好意思说自己是前端,下面这篇文章主要给大家介绍了关于JavaScript中Promise使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
情人节马上要到了，为情人节奉献一份礼物哈。。。一定要支持CSS3渲染的浏览器2012-02-02
这篇文章主要为大家详细介绍了微信小程序表单弹窗实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
继承是面向对象编程中的一个重要概念,它允许一个对象（子类或派生类）获取另一个对象（父类或基类）的属性和方法,在 JavaScript 中,有多种方式可以实现继承,本文将给大家介绍六种常见的JavaScript继承方法,需要的朋友可以参考下2023-09-09
filter是new一个新的array，这篇文章主要介绍了javascipt filter过滤介绍及使用,需要的朋友可以参考下2014-09-09
本文主要介绍了setTimeout原理；setTimeout(function(){..},0)的意义；setTimeout的this指向和参数问题。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了根据配置文件加载js依赖模块,解决方法是笔者自己的思路，抛砖引玉，需要的朋友可以参考下2014-12-12
本篇文章主要介绍了JavaScript中 DOM操作方法小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
这篇文章主要介绍了Web表单提交之disabled问题js解决方法,分析了通过js解决保存值也能保留用户不能输入的功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
在做项目时候遇到一个小小的显示客户部门名称（拼音）的业务，就是在部门名称下有相应的拼音，而在现有的数据库中没有相应字段，并且部门数量比较多，添加起来比较费时，就想能否在js中实现，在页面中处理。2010-03-03
最新评论