Hi các bạn, hôm nay mình sẽ tiếp tục đi tới bài số 5.
Trong bài này chúng ta sẽ học cách làm thế nào để vẽ được văn bản trên một canvas, những phương thức và thuộc tính quan trọng nhất là:
Trong bài này chúng ta sẽ học cách làm thế nào để vẽ được văn bản trên một canvas, những phương thức và thuộc tính quan trọng nhất là:
- font ✓ định nghĩa những thuộc tính phông cho văn bản
- fillText(text,x,y) ✓ vẽ văn bản (có tô màu) trên canvas
- strokeText(text,x,y) ✓ vẽ văn bản trên canvas (không tô màu)
Sử dụng fillText()
Ví dụ
Thiết lập font là 30px "Arial" và viết một text tô màu trên canvas:
JavaScript:
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()
Ví dụ
Thiết lập font là 30px "Arial" và viết một text, không tô màu, trên canvas:
JavaScript:
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à căn giữa cho văn bản
Ví dụ
Thiết lập font 30px "Comic Sans MS" và viết một text được tô màu đỏ nằm giữa canvas:
JavaScript:
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);
Trương Đức Tài.
