Phương thức Canvas fillText()
Đị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 ý:Vui lòng sử dụng font Thuộc tính để xác định font 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 gradient.
Mô hình
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 gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Điền màu gradient
ctx.fillStyle=gradient;
ctx.fillText("codew3c.com",10,90);
Cú pháp
context.fillText(text,x,y,maxWidth);
Giá trị tham số
| Tham số | Mô tả |
|---|---|
| text | Định nghĩa văn bản xuất ra trên canvas. |
| x | Vị trí x của tọa độ bắt đầu vẽ văn bản (so với canvas). |
| y | Vị trí y của tọa độ bắt đầu vẽ văn bản (so với canvas). |
| maxWidth | 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 chỉ ra 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ợ phần tử <canvas>.
