Thuộc tính textAlign của canvas HTML
Định nghĩa và cách sử dụng
textAlign Thuộc tính này dựa trên điểm cố định, thiết lập hoặc trả về cách đối齡 văn bản hiện tại.
Thường thì văn bản sẽ bắt đầu từ vị trí được chỉ định, nhưng nếu bạn đặt textAlign="right" và đặt văn bản tại vị trí 150, thì văn bản sẽ kết thúc tại vị trí 150.
Lưu ý:sử dụng fillText() hoặc strokeText() Phương pháp thực sự vẽ và định vị văn bản trên canvas.
Mô hình
Tạo một đường đỏ tại vị trí 150. Vị trí 150 là điểm cố định của tất cả các văn bản được định nghĩa dưới đây. Hãy nghiên cứu hiệu ứng của từng giá trị textAlign:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Tạo đường xanh tại vị trí 150
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// Hiển thị các 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);
Cú pháp
context.textAlign="center|end|left|right|start";
Giá trị thuộc tính
| Giá trị | Mô tả |
|---|---|
| start | Mặc định. Văn bản bắt đầu ở vị trí đã chỉ định. |
| end | Văn bản kết thúc ở vị trí đã chỉ định. |
| center | Văn bản được đặt ở vị trí trung tâm đã chỉ định. |
| left | Canh trái văn bản. |
| right | Canh phải văn bản. |
Chi tiết kỹ thuật
| Giá trị mặc định： | start |
|---|
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.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Ghi chú：Internet Explorer 8 và các phiên bản sớm hơn không hỗ trợ yếu tố <canvas>.
