Comment puis-je calculer la largeur du texte en JavaScript à l'aide de la méthode Canvas ?

Comment calculer la largeur du texte avec JavaScript

Le calcul de la largeur d'une chaîne à l'aide de JavaScript n'est pas immédiatement simple, en particulier lorsque vous utilisez une police non monospace. Ici, nous explorons une solution utilisant la méthode Canvas.measureText en HTML 5.

Méthode HTML 5 Canvas pour le calcul de la largeur du texte

Pour utiliser Canvas.measureText, nous créons un contexte de canevas et l'attribuons le style de police souhaité. Ensuite, nous utilisons la méthode MeasureText pour mesurer la largeur du texte spécifié.

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

Par exemple, pour calculer la largeur de "bonjour !" dans la police "bold 12pt arial", nous pouvons faire :

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

Utiliser les styles de police CSS

Si nous voulons utiliser la taille de police d'un élément spécifique, nous pouvons utiliser getCanvasFont fonction utilitaire :

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

Avantages de la méthode Canvas

Par rapport à Méthodes basées sur le DOM, la méthode Canvas présente plusieurs avantages :

• Concision et sécurité :Elle ne change ni l'état global ni le DOM.
• Personnalisation : Il permet une personnalisation plus poussée des propriétés du texte telles que textAlign et textBaseline.

Notes

• Lors de l'ajout de texte au DOM, tenez compte des effets de remplissage, de marge et de bordure.
• Sur certains navigateurs, la méthode Canvas fournit une précision inférieure au pixel (résultat à virgule flottante), tandis que sur d'autres, elle n'est précise qu'en nombres entiers.
• Dans Firefox, le Canvas est nettement plus rapide que les méthodes basées sur DOM.

Comparaison des performances

Un benchmark jsperf montre que la méthode Canvas et une méthode de mise en cache basée sur DOM ont des performances similaires, sauf dans Firefox où la méthode Canvas est nettement plus rapide.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!