Text HTML Canvas

Vẽ văn bản trên canvas

Để vẽ văn bản trên canvas, thuộc tính và phương pháp quan trọng nhất là:

• font - Định nghĩa thuộc tính phông chữ của văn bản
• fillText(text,x,y) - Vẽ văn bản "lấp đầy" trên canvas
• strokeText(text,x,y) - Vẽ văn bản trên canvas (không lấp đầy)

Sử dụng fillText()

Mẫu

Đặt phông chữ thành "30px Arial" và viết văn bản trên canvas (lấp đầy):

JavaScript:

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

Thử trực tiếp

Sử dụng strokeText()

Mẫu

Đặt phông chữ thành "30px Arial" và viết văn bản trên canvas (không lấp đầy):

JavaScript:

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

Thử trực tiếp

Thêm màu và canh giữa văn bản

Mẫu

Đặt phông chữ thành "30px Comic Sans MS" và viết văn bản màu đỏ ở giữa 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);

Thử trực tiếp

Xin xem thêm:

Hướng dẫn tham khảo đầy đủ Canvas của CodeW3C.com