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