Textmetriken von HTML5 Canvas

Autor：Eve Cole Aktualisierungszeit：2025-05-06 10:48:02

Wulin.com (www.vevb.com) Artikel Einführung: Um die Textmessung des HTML5 -Canvas -Textes zu erhalten, können wir die Methode zum MesstExt () Canvas -Kontext verwenden. Diese Methode erfordert eine Textzeichenfolge und gibt eine Schriftart für den bereitgestellten Text basierend auf einem Messobjekt zurück und dem aktuellen Text des Kontextes zugeordnet.

Um die Textmetriken von HTML5 -Canvas zu erhalten, können wir die Methode des Canvas -Kontextes von mesuretext () verwenden. Diese Methode erfordert eine Textzeichenfolge und gibt eine Schriftart für den bereitgestellten Text basierend auf einem Messobjekt zurück und dem aktuellen Text des Kontextes zugeordnet.

Derzeit ist die Breite des Textes die einzige Maßnahme mit der Methode mesuretext (). Derzeit wird derzeit kein hohes metrisches Textsystem unterstützt.

<! DocType html>

<html>

<kopf>

Körper {

Rand: 0px;

Polsterung: 50px;

}

#mycanvas {

Grenze: 1PX Solid #9c9898;

}

</style>

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 = Hallo Welt!;

context.font = 30pt calibri;

context.textalign = center;

context.fillStyle = blau;

context.FillText (text, x, y);

// Textmetriken erhalten

var metrics = context.measuretext (text);

var width = metrics.width;

context.font = 20pt calibri;

context.textalign = center;

context.fillStyle = #555;

context.FillText (( + width + px breit), x, y + 40);

};

</script>

</head>

</canvas>

</body>

</html>