Matukio ya HTML Canvas

在画布上绘制文本

要在画布上绘制文本，最重要的属性和方法是：

• font - 定义文本的字体属性
• fillText(text,x,y) - 在画布上绘制“填充的”文本
• strokeText(text,x,y) - 在画布上绘制文本（无填充）

Kutumia fillText()

Mfano

Wafungua ujumbe wa "30px Arial" naandika ujumbe kwenye rangi ya kichwa (inafungua):

JavaScript:

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

Jifunze tena

Kutumia strokeText()

Mfano

Wafungua ujumbe wa "30px Arial" naandika ujumbe kwenye rangi ya kichwa (haukufungua):

JavaScript:

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

Jifunze tena

Ongeza rangi na kuingia ujumbe kwenye kati

Mfano

Wafungua ujumbe wa "30px Comic Sans MS", naandika ujumbe mweupe kwenye kati ya rangi ya kichwa:

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

Jifunze tena

Tazama pia:

Mafaa wa Kina cha Canvas cha Kina cha CodeW3C.com