Métriques de texte du toile HTML5

Auteur：Eve Cole Date de mise à jour：2025-05-06 10:48:02

Wulin.com (www.vevb.com) Introduction de l'article: Pour obtenir la mesure du texte du texte de toile HTML5, nous pouvons utiliser la méthode de mesure du contexte de canevas de mesure (). Cette méthode nécessite une chaîne de texte et renvoie une police pour le texte fourni en fonction d'un objet de mesure et affecté au texte actuel du contexte.

Pour obtenir des métriques de texte du canevas HTML5, nous pouvons utiliser la méthode du contexte du canevas de MeasureText (). Cette méthode nécessite une chaîne de texte et renvoie une police pour le texte fourni en fonction d'un objet de mesure et affecté au texte actuel du contexte.

Actuellement, la largeur du texte est la seule mesure avec la méthode MEASURETXT (). Le système métrique élevé de texte n'est pas actuellement pris en charge.

<! Doctype html>

<html>

<adal>

<style>

corps {

marge: 0px;

rembourrage: 50px;

}

#mycanvas {

Border: 1px solide # 9C9898;

}

</ style>

<cript>

window.onload = function () {

var canvas = document.getElementById (myCanvas);

var context = canvas.getContext (2d);

var x = canvas.width / 2;

var y = canvas.height / 2 - 10;

var text = bonjour world!;

context.font = 30pt calibri;

context.TextAlign = Center;

context.fillStyle = bleu;

context.fillText (texte, x, y);

// Obtenez des mesures de texte

var metrics = context.measureText (texte);

var width = metrics.width;

context.font = 20pt calibri;

context.TextAlign = Center;

context.fillStyle = # 555;

context.fillText ((+ width + px large), x, y + 40);

};

</cript>

</ head>

</ canvas>

</docy>

</html>