HTML canvas textBaseline ਪ੍ਰਤਿਯਾਗਤ

HTML5 Canvas ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ

ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ

textBaseline ਪ੍ਰਤਿਯਾਗਤ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਨ ਜਾਂ ਵਾਪਸ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਟੈਕਸਟ ਦਰਸਾਇਆ ਜਾਂਦਾ ਹੈ。

ਹੇਠ ਦਿੱਤੇ ਚਿੱਤਰ ਵਿੱਚ textBaseline ਪ੍ਰਤਿਯਾਗਤ ਦੀਆਂ ਵੱਖ-ਵੱਖ ਗਿਣਤੀਆਂ ਦਿਸਾਈਆਂ ਗਈਆਂ ਹਨ:

文本基线图示

ਟਿੱਪਣੀਆਂ:fillText() ਜਾਂ strokeText() ਮੇਜ਼ ਉੱਤੇ ਲਿਖੇ ਵਿਆਕਰਣ ਨੂੰ ਸਥਾਪਤ ਕਰਨ ਲਈ ਵਿਧੀ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਟੈਕਸਟਬੇਲਾਈਨ ਕੀਮਤ ਵਰਤੀ ਜਾਵੇਗੀ。

ਉਦਾਹਰਣ

ਨੀਲੇ ਰੰਗ ਨਾਲ ਪੂਰਣ ਚੌਕਟੀ ਦੇਣ ਦੀ ਪ੍ਰਕਿਰਿਆ:

ਤੁਹਾਡਾ ਬਰਾਉਜ਼ਰ canvas ਟੈਗ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਦਿੰਦਾ ਹੈ。

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 ਟੈਕਸਟ ਬੇਸਲਾਈਨ ਐਮ ਬਕਸ ਦੇ ਉੱਪਰ ਹੈ。
hanging ਟੈਕਸਟ ਬੇਸਲਾਈਨ ਲਟਕਣ ਵਾਲੀ ਬੇਸਲਾਈਨ ਹੈ。
middle ਟੈਕਸਟ ਬੇਸਲਾਈਨ ਐਮ ਬਕਸ ਦੇ ਮੱਧ ਵਿੱਚ ਹੈ。
ideographic ਟੈਕਸਟ ਬੇਸਲਾਈਨ ਅਰਥਾਤਮਕ ਬੇਸਲਾਈਨ ਹੈ。
bottom ਟੈਕਸਟ ਬੇਸਲਾਈਨ ਐਮ ਬਕਸ ਦੇ ਨੀਚੇ ਹੈ。

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਮੂਲ ਮੁੱਲ: alphabetic

ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਸਿਫਰਾਂ ਵਿੱਚ ਪਹਿਲੀ ਵਾਰ ਇਸ ਗੁਣ ਦਾ ਪੂਰਣ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਬਰਾਉਜ਼ਰ ਦੀ ਸੰਸਕਰਣ ਦਿਸਾਈ ਗਈ ਹੈ。

ਚਰੋਮ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
ਚਰੋਮ ਐਜ਼ ਫਾਇਰਫਾਕਸ ਸਫਾਰੀ ਓਪਰਾ
4.0 9.0 3.6 4.0 10.1

ਟਿੱਪਣੀਆਂ:Internet Explorer 8 ਅਤੇ ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਦੀਆਂ ਸੰਸਕਰਣਾਂ <canvas> ਐਲੀਮੈਂਟ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਦਿੰਦੇ ਹਨ。

HTML5 Canvas ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ