Text ng HTML Canvas

I-draw ang teksto sa canvas

Ang pinakamahalagang katangian at paraan sa pagdraw ng teksto sa canvas ay:

• font - Nagbibigay ng katangian ng font ng teksto
• fillText(text,x,y) - I-draw ang "nakatunaw" na teksto sa canvas
• strokeText(text,x,y) - I-draw ang teksto sa canvas (walang pagtunaw)

Gamit ang fillText()

Mga halimbawa

I-set ang font sa "30px Arial", at isulat ang kulay na teksto sa canvas:

JavaScript:

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

Subukan ang sarili

Gamit ang strokeText()

Mga halimbawa

I-set ang font sa "30px Arial", at isulat ang teksto sa canvas (walang pagtunaw):

JavaScript:

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

Subukan ang sarili

Magdagdag ng kulay at itakpan ang teksto

Mga halimbawa

I-set ang font sa "30px Comic Sans MS", at isulat ang kulay na pulang teksto sa gitna ng canvas:

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);

Subukan ang sarili

Para sa:

Complete Canvas Reference Manual ng CodeW3C.com