HTML canvas property textBaseline
การกำหนดและการใช้งาน
property textBaseline กำหนดหรือคืนค่าระดับฐานของข้อความขณะวาด
ชาตร์ด้านล่างนี้แสดงรายละเอียดของ property textBaseline ที่สนับสนุน
หมายเหตุ：fillText() หรือ strokeText() ขณะที่กำหนดตำแหน่งของข้อความบนกระดานวาด จะใช้ค่า textBaseline ที่กำหนด
ตัวอย่าง
กำหนดวางแบบที่ถูกทำให้เต็มด้วยสีน้ำเงิน
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//วาดสายสีน้ำเงินที่ตำแหน่ง y=100
ctx.strokeStyle="blue";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//ใส่แต่ละคำที่ y=200 ด้วยค่า textBaseline ต่าง ๆ
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);
การภาษา
context.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>
