19/09/2018, 15:00
textAlign trong Canvas
Tạo một đường kẻ đỏ ở vị trí 150. Vị trí 150 sẽ là đường cơ sở cho tất cả các chữ ở ví dụ bên dưới. Hãy xem tác động của mỗi giá trị thuộc tính textAlign: 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 ...
Tạo một đường kẻ đỏ ở vị trí 150. Vị trí 150 sẽ là đường cơ sở cho tất cả các chữ ở ví dụ bên dưới. Hãy xem tác động của mỗi giá trị thuộc tính textAlign:
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 31 32 33 34 35 |
<!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"); // Tạo một đường kẻ đỏ ở vị trí 150 ctx.strokeStyle = "red"; ctx.moveTo(150, 20); ctx.lineTo(150, 170); ctx.stroke(); ctx.font = "15px Arial"; // Hiển thị những giá trị textAlign khác nhau ctx.textAlign = "start"; ctx.fillText("textAlign=start", 150, 60); ctx.textAlign = "end"; ctx.fillText("textAlign=end", 150, 80); ctx.textAlign = "left"; ctx.fillText("textAlign=left", 150, 100); ctx.textAlign = "center"; ctx.fillText("textAlign=center",150, 120); ctx.textAlign = "right"; ctx.fillText("textAlign=right",150, 140); </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 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| textAlign | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |
Định nghĩa và cách sử dụng
Thuộc tính textAlign sử dụng để thiết lập hoặc trả về vị trí căn lề hiện tại của nội dung so với điểm mốc.
Bình thường, chữ sẽ BẮT ĐẦU tại một vị trí chỉ định, tuy nhiên, nếu bạn thiết lập textAlign=”right” và đặt chữ vào vị trí 150, có nghĩa là chữ sẽ KẾT THÚC tại vị trí 150.
Mẹo: Sử dụng phương thức fillText() hoặc strokeText() để thể hiện chữ và vị trí chữ trên canvas.
Giá trị mặc định: start
Cú pháp JavaScript: context.textAlign=”center|end|left|right|start”;
Giá trị thuộc tính
| Giá trị | Miêu tả |
|---|---|
| start | Mặc định. Chữ bắt đầu tại vị trí được chỉ định |
| end | Chữ kết thúc tại vị trí được chỉ định |
| center | Trung tâm của chữ đặt tại vị trí được chỉ định |
| left | Chữ bắt đầu tại vị trí được chỉ định |
| right | Chữ kết thúc tại vị trí được chỉ định |
