ตัวแปร textAlign ของ HTML canvas

คู่มืออ้างอิง HTML5 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

การสนับสนุนโปรแกรมนavigators

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

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

หมายเหตุ：Internet Explorer 8 และตัวรุ่นเก่ากว่านี้ไม่สนับสนุนองค์ประกอบ <canvas>

คู่มืออ้างอิง HTML5 Canvas