JavaScript 基于HTML5 canvas 获取文本占用的像素宽度
- 2019 年 12 月 12 日
- 筆記
基于HTML5 canvas 获取文本占用的像素宽度
直接上代码
// 获取单行文本的像素宽度 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"' );