Văn bản Canvas HTML
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à:
- phông chữ - xác định các thuộc tính phông chữ cho văn bản
- fillText ( text, x, y ) - vẽ văn bản "đầy" trên canvas
- strokeText ( text, x, y ) - vẽ văn bản trên canvas (không tô màu)
Sử dụng fillText ()
Thí dụ
Đặt phông chữ thành 30px "Arial" và viết văn bản đầy đủ trên canvas:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
Sử dụng strokeText ()
Thí dụ
Đặt phông chữ thành 30px "Arial" và viết văn bản, không tô màu, trên canvas:
JavaScript:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
Thêm màu và văn bản chính giữa
Thí dụ
Đặt phông chữ thành 30px "Comic Sans MS" và viết một dòng chữ màu đỏ được tô màu ở giữa canvas:
JavaScript:
var
canvas = document.getElementById("myCanvas");
var 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);