ตัวอย่าง
สร้างสายสีแดงในตำแหน่ง 150 ตำแหน่ง 150 จุดยึดสำหรับทุกข้อความที่กำหนดไว้ในตัวอย่างด้านล่าง ศึกษาผลกระทบของมูลค่าทรัพย์สิน 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);
ลองตัวเอง» สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
คุณสมบัติ | |||||
---|---|---|---|---|---|
textAlign | ใช่ | 9.0 | ใช่ | ใช่ | ใช่ |
ความหมายและการใช้งาน
ชุดนี้ TextAlign ทรัพย์สินหรือผลตอบแทนการจัดตำแหน่งปัจจุบันสำหรับเนื้อหาข้อความตามจุดยึด
โดยปกติข้อความที่จะเริ่มต้นในตำแหน่งที่ระบุไว้ แต่ถ้าคุณตั้ง TextAlign = "สิทธิ" และวางข้อความในตำแหน่ง 150 ก็หมายความว่าข้อความที่ควรจะจบในตำแหน่งที่ 150
เคล็ดลับ: ใช้ fillText() หรือ strokeText() วิธีการวาดจริงและตำแหน่งข้อความบนผ้าใบ
ค่าเริ่มต้น: | เริ่มต้น |
---|---|
ไวยากรณ์ javascript: | context.textAlign="center|end|left|right|start"; |
ค่าทรัพย์สิน
ค่า | ลักษณะ | เล่น |
---|---|---|
start | ค่าเริ่มต้น. ข้อความที่เริ่มต้นที่ตำแหน่งที่ระบุไว้ | เล่น " |
end | ข้อความที่สิ้นสุดที่ตำแหน่งที่ระบุไว้ | เล่น " |
center | ศูนย์กลางของข้อความที่ถูกวางไว้ที่ตำแหน่งที่ระบุไว้ | เล่น " |
left | ข้อความที่เริ่มต้นที่ตำแหน่งที่ระบุไว้ | เล่น " |
right | ข้อความที่สิ้นสุดที่ตำแหน่งที่ระบุไว้ | เล่น " |