Phương thức HTML canvas fillText ()
Thí dụ
Viết "Hello world!" và "Cười thật tươi!" (với gradient) trên canvas, sử dụng fillText ():
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";
// Create gradient
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0"," magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.fillStyle = gradient;
ctx.fillText("Big smile!", 10, 90);
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phương pháp này.
| Method | |||||
|---|---|---|---|---|---|
| fillText() | Yes | 9.0 | Yes | Yes | Yes |
Lưu ý: Thông số maxWidth không được hỗ trợ trong Safari 5.1 và các phiên bản trước đó.
Định nghĩa và Cách sử dụng
Phương thức fillText () vẽ văn bản đã điền trên canvas. Màu mặc định của văn bản là màu đen.
Mẹo: Sử dụng thuộc tính phông chữ để chỉ định phông chữ và kích thước phông chữ, đồng thời sử dụng thuộc tính fillStyle để hiển thị văn bản bằng một màu / gradient khác.
| Cú pháp JavaScript: | context .fillText ( text, x, y, maxWidth ); |
|---|
Giá trị tham số
| Parameter | Description | Play it |
|---|---|---|
| text | Specifies the text that will be written on the canvas | |
| x | The x coordinate where to start painting the text (relative to the canvas) | |
| y | The y coordinate where to start painting the text (relative to the canvas) | |
| maxWidth | Optional. The maximum allowed width of the text, in pixels |
❮ Tham chiếu HTML Canvas