Phương thức fillText() của canvas HTML
Định nghĩa và cách sử dụng
fillText() Phương thức vẽ văn bản có màu trên canvas. Màu mặc định của văn bản là đen.
Lưu ý:Hãy sử dụng font Thuộc tính để xác định phông chữ và kích thước, và sử dụng fillStyle Thuộc tính để vẽ văn bản với màu khác hoặc dải màu.
Mẫu
Sử dụng fillText() để viết văn bản "Hello world!" và "codew3c.com" trên canvas:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);
ctx.font="30px Verdana";
// Tạo dải màu
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Dùng độ đậm nhạt để tô màu
ctx.fillStyle=gradient;
ctx.fillText("codew3c.com",10,90);
Cú pháp
context.fillText(text,x,y,maxWidth);
Giá trị của parameter
| Parameter | Mô tả |
|---|---|
| text | Định nghĩa văn bản xuất ra trên canvas. |
| x | Vị trí x của điểm bắt đầu vẽ văn bản (theo canvas). |
| y | Vị trí y của điểm bắt đầu vẽ văn bản (theo canvas). |
| maxWidth | Tùy chọn. Chiều rộng văn bản tối đa, tính bằng pixel. |
Hỗ trợ trình duyệt
Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Ghi chú：Internet Explorer 8 và các phiên bản sớm hơn không hỗ trợ yếu tố <canvas>.
