Để vẽ văn bản trên canvas trong HTML5, hãy sử dụng phương thức strokeText (). Đây là cú pháp của phương thức strokeText (). Nó vuốt văn bản đã cho ở vị trí đã cho, được biểu thị bằng các tọa độ x và y đã cho. Màu mặc định là đen.
strokeText(text, x, y [, maxWidth ] )
Đây là các giá trị tham số của phương thức strokeText () -
| | | |
|---|---|---|
| S. Không | Thông số | Mô tả |
| 1 | Văn bản | Văn bản được viết |
| 2 | X | x tọa độ nơi bức tranh bắt đầu |
| 3 | Y | x tọa độ nơi bức tranh bắt đầu |
| 4 | maxWidth | Chiều rộng tối đa cho phép tính bằng pixel |
Ví dụ
Bạn có thể thử chạy đoạn mã sau để vẽ văn bản bằng strokeText () trong HTML5 -
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas strokeText()</title>
</head>
<body>
<canvas id="newCanvas" width="400" height="150" style="border:1px solid #000000;">
</canvas>
<script>
var c = document.getElementById("newCanvas");
var ctxt = c.getContext("2d");
ctxt.fillStyle = '#00F';
ctxt.font = "20px Georgia";
ctxt.strokeText("Tutorialspoint", 10, 50);
ctxt.fillStyle = '#Cff765';
ctxt.font = "30px Verdana";
ctxt.strokeText("Simply Easy Learning!", 10, 90);
</script>
</body>
</html>