HTML kanvas textBaseline katangian
Tukuyin at Paggamit
Ang textBaseline na katangian ay nagtatakda o ibabalik ang kasalukuyang text baseline sa pagpipinta ng teksto.
Ang sumusunod na litrato ay nagpakita ng iba't ibang baseline na suportado ng textBaseline na katangian:

หมายเหตุ:fillText() o strokeText() Ang paraan sa paglokasyon ng teksto sa kanvas ay gagamitin ang tinukoy na textBaseline na halaga.
Mga halimbawa
Tukuyin ang parangal na may kulay ng asul na silid:
JavaScript:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); //Iginuguhit ang asul na linya sa posisyon y=100 ctx.strokeStyle="blue"; ctx.moveTo(5,100); ctx.lineTo(395,100); ctx.stroke(); ctx.font="20px Arial" //Maglagay ng bawat salita sa iba't ibang textBaseline sa y=200 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);
pahayag
konteksto.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
ค่ารายละเอียด
ค่า | รายละเอียด |
---|---|
alphabetic | ค่าเริ่มต้น。ขอบของข้อความเป็นขอบหลังทั่วไป |
top | ขอบของข้อความเป็นจุดต่อยอดของกล่อง em |
hanging | ขอบของข้อความเป็นขอบหลังที่ต่อเนื่อง |
middle | ขอบของข้อความเป็นกลางของกล่อง em |
ideographic | ขอบของข้อความเป็นขอบหลังความหมาย |
bottom | ขอบของข้อความเป็นจุดต่ำของกล่อง em |
รายละเอียดเทคนิค
ค่าเริ่มต้น: | alphabetic |
---|
การสนับสนุนเบราเซอร์
ตัวเลขในตารางนี้ระบุตัวรุ่นของเบราเซอร์ที่สนับสนุนคุณสมบัตินี้เต็มที่
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
หมายเหตุ:Internet Explorer 8 และตัวรุ่นเก่ากว่าไม่สนับสนุนสิ่งที่กล่าวว่า <canvas> อิเล็กทรอนิกส์