Wie kann ich die Textbreite in JavaScript mithilfe der Canvas-Methode berechnen?

So berechnen Sie die Textbreite mit JavaScript

Die Berechnung der Breite einer Zeichenfolge mit JavaScript ist nicht sofort einfach, insbesondere wenn Sie eine Nicht-Monospace-Schrift verwenden. Hier untersuchen wir eine Lösung mit der Canvas.measureText-Methode in HTML 5.

HTML 5 Canvas-Methode zur Berechnung der Textbreite

Um Canvas.measureText zu verwenden, erstellen wir einen Canvas-Kontext und weisen ihn zu den gewünschten Schriftstil. Anschließend verwenden wir die Methode „measureText“, um die Breite des angegebenen Texts zu messen.

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;
}

Zum Beispiel, um die Breite von „Hallo!“ zu berechnen. In der Schriftart „Bold 12pt Arial“ können wir Folgendes tun:

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

CSS-Schriftstile verwenden

Wenn wir die Schriftgröße eines bestimmten Elements verwenden möchten, können wir getCanvasFont verwenden Utility-Funktion:

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

Vorteile der Canvas-Methode

Im Vergleich zu Als DOM-basierte Methode bietet die Canvas-Methode mehrere Vorteile:

• Prägnanz und Sicherheit:Sie ändert weder den globalen Status noch das DOM.
• Anpassung: Es ermöglicht eine weitere Anpassung von Texteigenschaften wie textAlign und textBaseline.

Hinweise

• Berücksichtigen Sie beim Hinzufügen von Text zum DOM Abstand, Rand und Rahmeneffekte.
• Bei einigen Browsern die Canvas-Methode bietet Subpixel-Genauigkeit (Gleitkomma-Ergebnis), während es bei anderen nur auf ganze Zahlen genau ist.
• In Firefox ist die Canvas-Methode von großer Bedeutung schneller als DOM-basierte Methoden.

Leistungsvergleich

Ein jsperf-Benchmark zeigt, dass die Canvas-Methode und eine Caching-DOM-basierte Methode eine ähnliche Leistung haben, außer in Firefox, wo die Canvas-Methode ist deutlich schneller.

Das obige ist der detaillierte Inhalt vonWie kann ich die Textbreite in JavaScript mithilfe der Canvas-Methode berechnen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!