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