Ιδιότητα textBaseline του HTML canvas

Περιγραφική εγκύκλιος HTML5 Canvas

Ορισμός και χρήση

Η ιδιότητα textBaseline ορίζει ή επιστρέφει τη τρέχουσα γραμμή βάσης για τη γραφή κειμένου.

Η παρακάτω εικόνα δείχνει τις διάφορες βάσεις γραμμής που υποστηρίζει η ιδιότητα textBaseline:

Άξονας κειμένου

Σημείωση:fillText() ή strokeText() Η μέθοδος τοποθετεί τη λέξη στο καμβά χρησιμοποιώντας τη καθορισμένη τιμή textBaseline.

Παράδειγμα

Ορισμός οριζόντιας κουτίου με μπλε χρώμα:

Ο περιηγητής σας δεν υποστηρίζει το ετικέτα canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Δημιουργία μπλε γραμμής στην τοποθεσία y=100
ctx.strokeStyle="blue";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Τοποθετήστε κάθε λέξη με διαφορετική τιμή textBaseline στο y=200
ctx.textBaseline="top";
ctx.fillText("Top",5,100);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",50,100);
ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100);

δοκιμάστε το προσωπικά

γραμματική

context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";

Αξία προτίμησης

Τιμή Περιγραφή
alphabetic Προεπιλεγμένη. Η γραμμή βασικής γραμματοσειράς είναι η τυπική γραμμή των γράμμάτων.
top Η γραμμή βασικής γραμματοσειράς είναι το κορυφαίο του πλαίσματος em.
hanging Η γραμμή βασικής γραμματοσειράς είναι η κρεμαστή γραμμή.
middle Η γραμμή βασικής γραμματοσειράς είναι το κέντρο του πλαίσματος em.
ideographic Η γραμμή βασικής γραμματοσειράς είναι η γραμμή σημασιολογίας.
bottom Η γραμμή βασικής γραμματοσειράς είναι η βάση του πλαίσματος em.

Τεχνικές λεπτομέρειες

Προεπιλεγμένη τιμή: alphabetic

Υποστήριξη browser

Οι αριθμοί στην τύχη αναφέρουν την έκδοση του browser που υποστηρίζει πρώτη την ιδιότητα.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Σημείωση:O Internet Explorer 8 και οι προηγούμενες εκδόσεις δεν υποστηρίζουν το στοιχείο <canvas>.

Περιγραφική εγκύκλιος HTML5 Canvas