通过canvas方法计算任意字符串所占的实际宽度 |
您所在的位置：网站首页 › 字体大小怎么计算 › 通过canvas方法计算任意字符串所占的实际宽度 |
通过canvas方法计算任意字符串所占的实际宽度
|
目录
1. 法一 使用canvas画布。
`getContext("2d")`方法
`measureText()方法`
项目应用
法二 通过DOM测量
textContent() 方法设置文本内容 + clientWidth值
法三 用 visibility: hidden 的浮动的层来计算字符串宽度。
js计算任意字符串宽度
由于像素和字体大小，字节（特别是 UTF-8）等限制因素，所以我们不能直接知道一个字符串所占的实际宽度。
1. 法一 使用canvas画布。
测量文本以计算并返回给定字体的给定文本的宽度(以像素为单位)。 /** * 使用canvas画布。测量文本以计算并返回给定字体的给定文本的宽度(以像素为单位)。 * Uses canvas.measureText to compute and return the width of the given text of given font in pixels. * 要呈现的文本 * @param {String} text The text to be rendered. * 用于呈现文本的css字体描述符 * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana"). * * @see https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393 */ function getTextWidth(text, font) { // 重用canvas对象以获得更好的性能 // re-use canvas object for better performance var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas")); var context = canvas.getContext("2d"); // console.log('context=', context) 获得对绘图上下文canvas的引用 context.font = font var metrics = context.measureText(text) console.log('metrics=', metrics) return metrics.width; } console.log(getTextWidth("hello there!", "bold 12pt arial")); // close to 86 getContext("2d")方法要在画布上绘制图形，首先要取得绘图上下文。使用 getContext()方法可以获取对绘图上下文的引用。对于平面图形，需要给这个方法传入参数"2d"，表示要获取 2D 上下文对象： let drawing = document.getElementById("drawing"); // 确保浏览器支持 if (drawing.getContext) { let context = drawing.getContext("2d"); // 其他代码 }
|
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |