HTML canvas textAlign ιδιότητα

Εγχειρίδιο Canvas HTML5

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

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

Συνήθως, το κείμενο ξεκινά από τη καθορισμένη τοποθεσία, αλλά αν ορίσετε textAlign="right" και τοποθετήσετε το κείμενο στη θέση 150, τότε θα τελειώνει στη θέση 150.

Σημείωση:χρησιμοποιώντας fillText() ή strokeText() Τα μεθόδους χρησιμοποιούνται πραγματικά για την απόδοση και τοποθέτηση κειμένων στο καanvas.

Παράδειγμα

Δημιουργία μιας κόκκινης γραμμής στην τοποθεσία 150. Η τοποθεσία 150 είναι ο άξονας για όλες τις παραπάνω περιγραφές κειμένων. Εξετάστε την επίδραση κάθε τιμής textAlign:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 在位置 150 创建蓝线
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// 显示不同的 textAlign 值
ctx.textAlign="start";
ctx.fillText("textAlign=start",150,60);
ctx.textAlign="end";
ctx.fillText("textAlign=end",150,80);
ctx.textAlign="left";
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";
ctx.fillText("textAlign=center",150,120);
ctx.textAlign="right";
ctx.fillText("textAlign=right",150,140);

Δοκιμάστε το شخصικά

Γραμματική

context.textAlign="center|end|left|right|start";

Τιμή προπτυχίας

Τιμή Περιγραφή
start Προεπιλεγμένη. Το κείμενο ξεκινά στην καθορισμένη θέση.
τελείωσης Το κείμενο τελειώνει στην καθορισμένη θέση.
κεντρική Η κεντρική γραμμή κειμένου τοποθετείται στην καθορισμένη θέση.
αριστερά Η κεντρική γραμμή κειμένου είναι αριστερά εστιασμένη.
δεξιά Η κεντρική γραμμή κειμένου είναι δεξιά εστιασμένη.

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

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

Υποστήριξη προγράμματος περιήγησης

Τα αριθμήματα στη λίστα δείχνουν την έκδοση του προγράμματος περιήγησης που υποστηρίζει πρώτη φορά αυτήν την ιδιότητα.

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

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

Εγχειρίδιο Canvas HTML5