19/09/2018, 15:00
strokeText() trong Canvas
Viết chữ "Hello world!" và "Big smile!" (với dải màu) trong Canvas, sử dụng strokeText(): Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
Viết chữ "Hello world!" và "Big smile!" (với dải màu) trong Canvas, sử dụng strokeText():
Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" awidth="300" height="150" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "20px Georgia"; ctx.strokeText("Xin chào!", 10, 50); ctx.font = "30px Verdana"; // Tạo dải màu var gradient = ctx.createLinearGradient(0, 0, c.awidth, 0); gradient.addColorStop("0", "magenta"); gradient.addColorStop("0.5", "blue"); gradient.addColorStop("1.0", "red"); // Đổ dài màu lên viền chữ ctx.strokeStyle = gradient; ctx.strokeText("Cười tươi nào!", 10, 90); </script> </body> </html> |
Demo
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thuộc tính.
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| strokeText() | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |
Lưu ý: Tham số maxWidth không được hỗ trợ trong Safari.
Định nghĩa và cách sử dụng
Phương thức strokeText() sử dụng để viết chữ (sử dụng viền) trong canvas. Mặc định là màu đen.
Mẹo: Sử dụng thuộc tính font để quy định font chữ và cỡ chữ, sử dụng thuộc tính strokeStyle để đổ màu /dải màu lên viền chữ.
Cú pháp JavaScript: context.strokeText(text,x,y,maxWidth);
Giá trị tham số
| Tham số | Miêu tả |
|---|---|
| text | Nội dung để hiển thị trên Canvas |
| x | Tọa độ X điểm bắt đầu viết chữ |
| y | Tọa độ Y điểm bắt đầu viết chữ |
| maxWidth | Tùy chọn. Độ dài lớn nhất của chữ, đơn vị tính là pixels |
