JavaScript 基于HTML5 canvas 获取文本占用的像素宽度
程序员文章站
2022-04-15 14:43:39
基于HTML5 canvas 获取文本占用的像素宽度 by:授客 QQ:1033553122 直接上代码 // 获取单行文本的像素宽度 getTextPixelWith(text, fontStyle) { var canvas = document.createElement("canvas"); ......
基于html5 canvas 获取文本占用的像素宽度
by:授客 qq:1033553122
直接上代码
// 获取单行文本的像素宽度
gettextpixelwith(text, fontstyle) {
var canvas = document.createelement("canvas"); // 创建 canvas 画布
var context = canvas.getcontext("2d"); // 获取 canvas 绘图上下文环境
context.font = fontstyle; // 设置字体样式,使用前设置好对应的 font 样式才能准确获取文字的像素长度
var dimension = context.measuretext(text); // 测量文字
returndimension.width;
}
使用
let centertextpixelwidth = this.gettextpixelwith(
'想要获取像素宽度的文本',
'13px "microsoft yahei"'
);
上一篇: Javascript定时器
下一篇: MySQL 字符串分隔成行&子串统计