Phương thức Canvas strokeText()

Tài liệu tham khảo Canvas

Đị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 tham số để định nghĩa font và kích thước, và sử dụng strokeStyle Xuất bản văn bản với màu khác hoặc dải màu.

Mô hình

Sử dụng strokeText() để viết văn bản "Hello world!" và "codew3c.com" trên canvas:

Trình duyệt của bạn không hỗ trợ thẻ canvas HTML5.

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");
// Điền màu bằng dải màu
ctx.strokeStyle=gradient;
ctx.strokeText("codew3c.com",10,90);

Thử ngay

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 được 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 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ú:Trình duyệt Internet Explorer 8 và các phiên bản trước không hỗ trợ phần tử <canvas>.

Tài liệu tham khảo Canvas