利用canvas中的measureText测量字体的宽度
来源:互联网 发布:成都英文seo外包 编辑:程序博客网 时间:2024/06/05 17:09
工作项目中用到的东西,要限制一个容器的宽度,超过了这个宽度就要显示展开按钮,点击展开按钮要全部展示出来,可以用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>
这个是结果,30px的字有6个,宽度一共180,没毛病!!!哈哈!!
阅读全文
0 0
- 利用canvas中的measureText测量字体的宽度
- 测量Dialog的宽度 高度
- canvas的宽度设置
- 正确调用Paint的measureText()方法取得字符串显示的宽度值
- Android中调用Paint的measureText()方法取得字符串显示的宽度值
- 正确调用Paint的measureText()方法取得字符串显示的宽度值
- Android中调用Paint的measureText()方法取得字符串显示的宽度值
- 正确调用Paint的measureText()方法取得字符串显示的宽度值
- Html5中的Canvas宽度为100%
- Html5中的Canvas宽度为100%
- 字体自适应宽度的TextView
- 关于MeasureString测量字体的长度问题
- canvas创建渐变的字体
- panit测量文字宽度
- 文字的高度与宽度: Canvas.TextExtent
- canvas 设置宽度、高度的问题
- Android基础之测量text宽度的三种方式
- Android基础之测量text宽度的三种方式
- import.. from..分析
- 【Algo】排序算法
- Google《Android性能优化》学习笔记一
- 50个必备的实用jQuery代码段+ 可以直接拿来用的15个jQuery代码片段
- java中实现URL类
- 利用canvas中的measureText测量字体的宽度
- ESP8266编译脚本之五
- ajax同步请求的处理办法
- Pat 1004. 成绩排名
- three.js 02-01 之场景基本功能
- 网站常用灰色,画线必备
- 解决ConstraintLayout两个组件挤压问题
- Java8 FunctionInterface
- linux驱动--带传参数的helloworld驱动