欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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:授客 qq1033553122

 

直接上代码

 

// 获取单行文本的像素宽度

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"'

);