Bagaimanakah Saya Boleh Mengira Lebar Teks dalam JavaScript Menggunakan Kaedah Kanvas?

Cara Mengira Lebar Teks dengan JavaScript

Mengira lebar rentetan menggunakan JavaScript tidak serta-merta mudah, terutamanya apabila menggunakan muka taip bukan monospace. Di sini, kami meneroka penyelesaian menggunakan kaedah Canvas.measureText dalam HTML 5.

Kaedah Kanvas HTML 5 untuk Pengiraan Lebar Teks

Untuk menggunakan Canvas.measureText, kami mencipta konteks kanvas dan menetapkannya gaya fon yang dikehendaki. Kemudian, kami menggunakan kaedah measureText untuk mengukur lebar teks yang ditentukan.

function getTextWidth(text, font) {
  const canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
  const context = canvas.getContext("2d");
  context.font = font;
  const metrics = context.measureText(text);
  return metrics.width;
}

Contohnya, untuk mengira lebar "hello there!" dalam fon "bold 12pt arial", kita boleh lakukan:

console.log(getTextWidth("hello there!", "bold 12pt arial"));  // close to 86

Menggunakan Gaya Fon CSS

Jika kita mahu menggunakan saiz fon elemen tertentu, kita boleh menggunakan getCanvasFont fungsi utiliti:

const fontSize = getTextWidth(text, getCanvasFont(myEl));

Kelebihan Kanvas Kaedah

Berbanding dengan kaedah berasaskan DOM, kaedah Kanvas mempunyai beberapa kelebihan:

• Ketepatan dan keselamatan: Ia tidak mengubah keadaan global atau DOM.
• Penyesuaian: Ia membenarkan penyesuaian lanjut sifat teks seperti textAlign dan textBaseline.

Nota

• Apabila menambahkan teks pada DOM, pertimbangkan padding, margin dan kesan jidar.
• Pada sesetengah penyemak imbas, kaedah Kanvas memberikan ketepatan sub-piksel (hasil titik terapung), manakala pada yang lain ia hanya tepat untuk integer.
• Dalam Firefox, kaedah Kanvas jauh lebih pantas daripada kaedah berasaskan DOM.

Perbandingan Prestasi

Tanda aras jsperf menunjukkan bahawa kaedah Kanvas dan caching kaedah berasaskan DOM mempunyai prestasi yang sama, kecuali dalam Firefox yang kaedah Kanvas adalah lebih pantas.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengira Lebar Teks dalam JavaScript Menggunakan Kaedah Kanvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!