Phương thức HTML canvas strokeText()
Định nghĩa và cách sử dụng
strokeText() Phương thức vẽ văn bản trên canvas (không có màu nền). Màu mặc định là đen.
Lưu ý:Vui lòng sử dụng font Thuộc tính để xác định font và kích thước font, và sử dụng strokeStyle Thuộc tính để vẽ văn bản với màu khác hoặc dải màu.
Mô hình
Sử dụng phương thức strokeText() để 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.strokeText("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");
// Sử dụng dải màu để tô màu
ctx.strokeStyle=gradient;
ctx.strokeText("codew3c.com",10,90);
Cú pháp
context.strokeText(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 điểm bắt đầu vẽ văn bản (so với canvas). |
| y | Vị trí y của điểm bắt đầu vẽ văn bản (so với 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 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ợ yếu tố <canvas>.
