HTML คุณสมบัติผ้าใบ textBaseline
คู่มือการใช้งาน HTML ผ้าใบอ้างอิง
ตัวอย่าง
ในการ y = 100 วาดเส้นสีแดงแล้ว Y = 100 ชู textBaseline ที่มีค่าที่แตกต่างกันจะถูกวางไว้แต่ละคำ:
javascript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Draw a red line at y=100
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Place each word at y=100 with different textBaseline values
ctx.textBaseline="top";
ctx.fillText("Top",5,100);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",50,100);
ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100);
var ctx=c.getContext("2d");
//Draw a red line at y=100
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Place each word at y=100 with different textBaseline values
ctx.textBaseline="top";
ctx.fillText("Top",5,100);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",50,100);
ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100);
ลอง»
สนับสนุนเบราว์เซอร์
Internet Explorer 9, Firefox, Opera, Chrome และ Safari คุณสมบัติการสนับสนุน textBaseline
หมายเหตุ: textBaseline แอตทริบิวต์ผลกระทบที่แตกต่างกันในเบราว์เซอร์ที่แตกต่างกันโดยเฉพาะอย่างยิ่งการใช้งานของ "แขวน" หรือ "ideographic" เมื่อ
หมายเหตุ: 8 และรุ่นก่อนหน้าของ Internet Explorer ไม่สนับสนุน <ผ้าใบ> องค์ประกอบ
ความหมายและการใช้งาน
คุณสมบัติ textBaseline ชุดหรือส่งกลับข้อความเมื่อวาดพื้นฐานข้อความปัจจุบัน
ภาพประกอบต่อไปนี้แสดงให้เห็นว่าเส้นเขตแดน textBaseline คุณลักษณะที่สนับสนุน:
หมายเหตุ: fillText () และ strokeText () วิธีการบนผืนผ้าใบเมื่อข้อความการวางตำแหน่งจะใช้ค่า textBaseline ระบุ
| เริ่มต้น: | ตามตัวอักษร |
|---|---|
| ไวยากรณ์ javascript: | บริบท .textBaseline = "ตัวอักษร | ด้านบน |แขวน | กลาง | ideographic | ด้านล่าง"; |
มูลค่าทรัพย์สิน
| 值 | 描述 |
|---|---|
| alphabetic | 默认。文本基线是普通的字母基线。 |
| top | 文本基线是 em 方框的顶端。 |
| hanging | 文本基线是悬挂基线。 |
| middle | 文本基线是 em 方框的正中。 |
| ideographic | 文本基线是表意基线。 |
| bottom | 文本基线是 em 方框的底端。 |
คู่มือการใช้งาน HTML ผ้าใบอ้างอิง