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:

Hindi suportado ng iyong browser ang tag na canvas.

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);

Subukan nang personal

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> อิเล็กทรอนิกส์