Thuộc tính textAlign của Canvas
Định nghĩa và cách sử dụng
textAlign Thuộc tính dựa trên điểm dính, thiết lập hoặc trả về cách đối齐 nội dung văn bản hiện tại.
Thường thì văn bản sẽ bắt đầu từ vị trí đã chỉ định, nhưng nếu bạn thiết lập textAlign="right" và đặt văn bản ở vị trí 150, thì văn bản sẽ kết thúc ở 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.
Ví dụ
Tạo đường đỏ ở vị trí 150. Vị trí 150 là điểm chốt của tất cả các văn bản được định nghĩa trong ví dụ 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 blue ở 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. |
| kết thúc | Văn bản kết thúc ở vị trí đã chỉ định. |
| trung tâm | Trung tâm của văn bản được đặt ở vị trí đã chỉ định. |
| trái | Chữ văn bản canh trái. |
| phải | Chữ văn bản canh phải. |
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 hoàn toàn.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Ghi chú:Trình duyệt Internet Explorer 8 và các phiên bản sớm hơn không hỗ trợ phần tử <canvas>.
