JavaScriptはHTML 5 canvasに基づいてテキストが占有する画素幅を取得する

949 ワード

HTML 5 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"'
);