Mfano wa Canvas textBaseline

Muhtasari na Kifaa

Mfano wa textBaseline wa inaonyesha kipakana au kati ya kufanya matukio ya matendo ya sauti.

Matokeo ya picha hii inonyoa vifaa vya textBaseline vinavyosimamia vingine vya mawili:

Maelezo wa msingi wa maonyesho

Kweli:fillText() au strokeText() Wafanyikio katika kuingiaji ya kichwa cha chumba kina inatumiwa kwa thamani ya textBaseline inayotumika.

Mbinu

Ujumbe wa kina wa kijani:

Internet ya kijana inayofikia kwenye chumba cha kifaa cha picha haujui kusimamia kitengo cha picha cha kifaa.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Inaingiza mwelekeo wa kijani kwenye eneo y=100
ctx.strokeStyle="blue";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Inaingiza kila herufi kwa thamani ya textBaseline tofauti kwenye 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);

Jaribu kwenye mazingira

Inasomo

mazingira.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";

Mivuno ya kina

Mivuno Maelezo
alphabetic Mwako wa msingi. Mwili wa matukio wa mawili ni kuzingatia mawili wa herufi.
juu Mwili wa matukio wa mawili ni kuzingatia chumba cha juu cha em.
kushindwa Mwili wa matukio wa mawili ni kuzingatia mawili wa kushindwa.
kati Mwili wa matukio wa mawili ni kuzingatia kati cha em.
ideographic Mwili wa matukio wa mawili ni kuzingatia mawili wa maana.
chini Mwili wa matukio wa mawili ni kuzingatia chumba cha chini cha em.

Vifaa vya teknolojia

Mwako wa msingi alphabetic

Matumizi ya browser

Inafikia kiwango cha browser kwa sababu ya kusakinisha tabia hii.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Kweli:Internet Explorer 8 na zaidi ya zamani hawafikii elementi ya <canvas>.