HTML canvas textAlign Property
Thí dụ
Tạo một đường màu đỏ ở vị trí 150. Vị trí 150 là điểm neo cho tất cả văn bản được xác định trong ví dụ bên dưới. Nghiên cứu tác dụng của từng giá trị thuộc tính textAlign:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create a red line in position 150
ctx.strokeStyle = "red";
ctx.moveTo(150, 20);
ctx.lineTo(150, 170);
ctx.stroke();
ctx.font = "15px Arial";
// Show the different textAlign values
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);
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
| Property | |||||
|---|---|---|---|---|---|
| textAlign | Yes | 9.0 | Yes | Yes | Yes |
Định nghĩa và Cách sử dụng
Thuộc tính textAlign đặt hoặc trả về căn chỉnh hiện tại cho nội dung văn bản, theo điểm neo.
Thông thường, văn bản sẽ BẮT ĐẦU ở vị trí được chỉ định, tuy nhiên, nếu bạn đặt textAlign = "right" và đặt văn bản ở vị trí 150, có nghĩa là văn bản sẽ KẾT THÚC ở vị trí 150.
Mẹo: Sử dụng phương thức fillText () hoặc strokeText () để thực sự vẽ và định vị văn bản trên canvas.
| Giá trị mặc định: | khởi đầu |
|---|---|
| Cú pháp JavaScript: | context .textAlign = "center | end | left | right | start"; |
Giá trị tài sản
| Values | Description | Play it |
|---|---|---|
| start | Default. The text starts at the specified position | |
| end | The text ends at the specified position | |
| center | The center of the text is placed at the specified position | |
| left | The text starts at the specified position | |
| right | The text ends at the specified position |
❮ Tham chiếu HTML Canvas