Tekst HTML Canvas

Rysowanie tekstu na ekranie

Najważniejsze atrybuty i metody do rysowania tekstu na ekranie to:

• font - Definiuje atrybuty czcionki tekstu
• fillText(text,x,y) - Narysuj "wypełniony" tekst na ekranie
• strokeText(text,x,y) - Narysuj tekst na ekranie (bez wypełnienia)

Użyj fillText()

Przykład

Ustaw czcionkę na "30px Arial" i napisz tekst wypełniony na ekranie:

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

Spróbuj sam

Użyj strokeText()

Przykład

Ustaw czcionkę na "30px Arial" i napisz tekst na ekranie (bez wypełnienia):

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

Spróbuj sam

Dodaj kolor i wyśrodkuj tekst

Przykład

Ustaw czcionkę na "30px Comic Sans MS" i napisz tekst wypełniony czerwonym kolorem na środku ekranu:

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width/2, canvas.height/2);

Spróbuj sam

Zobacz również:

Pełne podręcznik referencyjny Canvas CodeW3C.com