Κείμενο Canvas HTML

Δημιουργία κειμένου στην επιφάνεια του καναβή

Οι πιο σημαντικές ιδιότητες και μεθόδοι για τη δημιουργία κειμένου στην επιφάνεια του καναβή είναι:

• font - Ορίζει τις ιδιότητες γραμματοσειράς του κειμένου
• fillText(text,x,y) - Γράψτε "γεμισμένο" κείμενο στην επιφάνεια του καναβή
• strokeText(text,x,y) - Γράψτε κείμενο στην επιφάνεια του καναβή χωρίς γεμίσματα

Χρήση fillText()

Παράδειγμα

Δημιουργία γραμματοσειράς "30px Arial" και γράψτε γεμισμένο κείμενο στην επιφάνεια του καναβή:

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = \"30px Arial\";
ctx.fillText(\"Γειά σου Κόσμε\", 10, 50);

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

Χρήση strokeText()

Παράδειγμα

Δημιουργία γραμματοσειράς "30px Arial" και γράψτε κείμενο στην επιφάνεια του καναβή χωρίς γεμίσματα:

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = \"30px Arial\";
ctx.strokeText(\"Γειά σου Κόσμε\", 10, 50);

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

Προσθήκη χρώματος και κεντρωμένο κείμενο

Παράδειγμα

Δημιουργία γραμματοσειράς "30px Comic Sans MS" και γράψτε κεντραρισμένο κόκκινο κείμενο στην κεντρική θέση του καναβή.

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = \"30px Comic Sans MS\";
ctx.fillStyle = \"κόκκινο\";
ctx.textAlign = \"center\";
ctx.fillText(\"Γειά σου Κόσμε\", canvas.width/2, canvas.height/2);

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

Για περισσότερες πληροφορίες δείτε:

Πλήρης Οδηγός Canvas του CodeW3C.com