Μέθοδος HTML canvas fillText()

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

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

fillText() Η μέθοδος drawText() στο καanvas θα χρωματίσει το κείμενο με τον προεπιλεγμένο χρωματισμό, ο οποίος είναι μαύρος.

Σημείωση:χρησιμοποιήστε font ιδιότητα για να καθορίσετε το γραμματοσειρά και το μέγεθος, και να χρησιμοποιήσετε fillStyle Οι ιδιότητες χρωματίζουν το κείμενο με άλλη χρώση/διαβάθμιση.

Παράδειγμα

Χρησιμοποιήστε το fillText() για να γράψετε κείμενο "Hello world!" και "codew3c.com" στο καanvas:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);
ctx.font="30px Verdana";
// 创建渐变
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Χρησιμοποιήστε τη διαδρομή για να χρωματίσετε
ctx.fillStyle=gradient;
ctx.fillText("codew3c.com",10,90);

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

Γλώσσα

context.fillText(text,x,y,maxWidth);

Παράμετρος τιμής

Παράμετροι Περιγραφή
text Ορίζει το κείμενο που εκτυπώνεται στο canvas.
x Η θέση του x του κειμένου που ξεκινά την πλοήγηση (σχετικά με το canvas).
y Η θέση της y του κειμένου που ξεκινά την πλοήγηση (σχετικά με το canvas).
maxWidth Επιλογή. Η μέγιστη πλάτος κειμένου, μετρημένα σε pixel.

Υποστήριξη περιηγητή

Οι αριθμοί στην τаблицή δείχνουν την έκδοση του πρώτου προγράμματος περιήγησης που υποστηρίζει αυτήν την ιδιότητα.

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

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

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