Canvas textBaseline అనే లాభం
నిర్వచనం మరియు ఉపయోగం
textBaseline అనే లాభం అనే లాభం ప్రస్తుత టెక్స్ట్ బేస్ లైన్ అనే లాభం నిర్ధారించడానికి లేదా తిరిగి పొందడానికి ఉపయోగిస్తారు.
క్రింది చిత్రం టెక్స్ట్ బేస్ లైన్ అట్రిబ్యూట్ యొక్క మద్దతు చేసే వివిధ బేస్ లైన్లను ప్రదర్శిస్తుంది.
注释：fillText() లేదా strokeText() కాన్వెస్ పెయింటింగ్ ని లొకేట్ చేసినప్పుడు కొన్ని టెక్స్ట్ బేస్ లైన్ విలువలను ఉపయోగిస్తారు.
ప్రతిరూపం
నీలం రంగులో పూరితమైన నిష్కర్షనను నిర్వహించండి:
జావాస్క్రిప్ట్:
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);
సింథెక్స్
కంటెక్స్.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
అట్రిబ్యూట్ విలువ
| విలువ | వర్ణన |
|---|---|
| alphabetic | డిఫాల్ట్. టెక్స్ట్ బేస్ లైన్ సాధారణ అక్షర బేస్ లైన్ ఉంటుంది. |
| టాప్ | టెక్స్ట్ బేస్ లైన్ అమ్ ఫ్రేమ్ యొక్క మేలున ఉంటుంది. |
| హాంగింగ్ | టెక్స్ట్ బేస్ లైన్ హాంగింగ్ బేస్ లైన్ ఉంటుంది. |
| మిడిల్ | టెక్స్ట్ బేస్ లైన్ అమ్ ఫ్రేమ్ యొక్క మధ్యలో ఉంటుంది. |
| ఇడియోగ్రాఫిక్ | టెక్స్ట్ బేస్ లైన్ ప్రత్యక్ష బేస్ లైన్ ఉంటుంది. |
| బటం | టెక్స్ట్ బేస్ లైన్ అమ్ ఫ్రేమ్ యొక్క అడుగున ఉంటుంది. |
టెక్నికల్ వివరాలు
| అప్రికేటిక్ | alphabetic |
|---|
浏览器支持
表中的数字注明了首个完全支持该属性的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
注释：Internet Explorer 8 以及更早的版本不支持
