Canvas textAlign 屬性

คู่มือ Canvas

定義和用法

textAlign 属性根據鍵點，設置或返回文本內容的當前對齊方式。

โดยทั่วไป ข้อความจะเริ่มตั้งแต่ตำแหน่งที่กำหนด แต่ถ้าคุณตั้งค่า textAlign="right" และจัดลงข้อความที่ตำแหน่ง 150 ข้อความจะจบที่ตำแหน่ง 150

คำเตือน：ด้วย fillText() หรือ strokeText() วิธีที่จะวาดและจัดตำแหน่งข้อความในบนกระดาษวาด

ตัวอย่าง

สร้างสายสีแดงที่ตำแหน่ง 150. ตำแหน่ง 150 คือจุดหุ้มของข้อความที่กำหนดด้านล่างนี้ทั้งหมด。 ศึกษาผลของค่า textAlign ต่างๆ:

เว็บเครื่องมือของคุณไม่สนับสนุนแท็ก canvas。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// สร้างสายสีน้ำเงินที่ตำแหน่ง 150
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// แสดงค่า textAlign ต่างๆ
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);

ทดลองด้วยตัวเอง

ระบบทางภาษา

context.textAlign="center|end|left|right|start";

ค่ารายละเอียดคุณสมบัติ

ค่า คำอธิบาย
start ปริยาย。ข้อความจะเริ่มที่ตำแหน่งที่กำหนด
end ข้อความจะจบที่ตำแหน่งที่กำหนด
center ข้อความที่ตั้งในกลางจะถูกจัดลงในตำแหน่งที่กำหนด
left ข้อความตั้งซ้าย
right ข้อความตั้งขวา

รายละเอียดเทคนิค

ค่าปริยาย： start

การสนับสนุนโดยบราวเซอร์

ตัวเลขในตารางนี้ระบุตอนที่บราวเซอร์แรกที่สนับสนุนคุณสมบัตินี้

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

หมายเหตุ:Internet Explorer 8 และตัวเลือกที่เดิมไม่สนับสนุนสิ่งที่ชื่อว่า <canvas> อิเล็กทรอนิกส์

คู่มือ Canvas