Canvas textBaseline 属性

کورس سیکل

JS مرجع دفتر

جاوا اسکریپٹ

ویندو

HTML DOM

وеб API

HTML اُبجیکٹ

</a></li> <li><a href="/pa/jsref/dom_obj_image.html" title="HTML DOM Image ਆਬੋਦਧ"><img></a></li> <li><a href="/pa/jsref/dom_obj_ins.html" title="HTML DOM Ins ਆਬੋਦਧ"><ins></a></li> <li><a href="/pa/jsref/dom_obj_button.html" title="HTML DOM انٹر بٹن آؤٹپوائنٹ"><input> button</a></li> <li><a href="/pa/jsref/dom_obj_checkbox.html" title="HTML DOM انٹر چیک بکس آؤٹپوائنٹ"><input> checkbox</a></li> <li><a href="/pa/jsref/dom_obj_color.html" title="HTML DOM انٹر کلر آؤٹپوائنٹ"><input> color</a></li> <li><a href="/pa/jsref/dom_obj_date.html" title="HTML DOM انٹر ڈیٹ آؤٹپوائنٹ"><input> date</a></li> <li><a href="/pa/jsref/dom_obj_datetime.html" title="HTML DOM انٹر ڈیٹ تائم آؤٹپوائنٹ"><input> datetime</a></li> <li><a href="/pa/jsref/dom_obj_datetime-local.html" title="HTML DOM انٹر ڈیٹ تائم لوکل آؤٹپوائنٹ"><input> datetime-local</a></li> <li><a href="/pa/jsref/dom_obj_email.html" title="HTML DOM انٹر ای میل آؤٹپوائنٹ"><input> email</a></li> <li><a href="/pa/jsref/dom_obj_fileupload.html" title="HTML DOM انٹر فائل اپ لود آؤٹپوائنٹ"><input> file</a></li> <li><a href="/pa/jsref/dom_obj_hidden.html" title="HTML DOM انٹر ہیڈن آؤٹپوائنٹ"><input> hidden</a></li> <li><a href="/pa/jsref/dom_obj_input_image.html" title="HTML DOM انٹر اوشن آؤٹپوائنٹ"><input> image</a></li> <li><a href="/pa/jsref/dom_obj_month.html" title="HTML DOM انٹر مونث آؤٹپوائنٹ"><input> month</a></li> <li><a href="/pa/jsref/dom_obj_number.html" title="HTML DOM انٹر نمبر آؤٹپوائنٹ"><input> number</a></li> <li><a href="/pa/jsref/dom_obj_password.html" title="HTML DOM انٹر پاسورڈ آؤٹپوائنٹ"><input> password</a></li> <li><a href="/pa/jsref/dom_obj_radio.html" title="HTML DOM انٹر ریڈیو آؤٹپوائنٹ"><input> radio</a></li> <li><a href="/pa/jsref/dom_obj_range.html" title="HTML DOM انٹر رینج آؤٹپوائنٹ"><input> range</a></li> <li><a href="/pa/jsref/dom_obj_reset.html" title="HTML DOM انٹر ریسیٹ آؤٹپوائنٹ"><input> reset</a></li> <li><a href="/pa/jsref/dom_obj_search.html" title="HTML DOM انٹر سرچ آؤٹپوائنٹ"><input> search</a></li> <li><a href="/pa/jsref/dom_obj_submit.html" title="HTML DOM انٹر سبنسل آؤٹپوائنٹ"><input> submit</a></li> <li><a href="/pa/jsref/dom_obj_text.html" title="HTML DOM انٹر ٹیکسٹ آؤٹپوائنٹ"><input> text</a></li> <li><a href="/pa/jsref/dom_obj_input_time.html" title="HTML DOM انٹر تائم آؤٹپوائنٹ"><input> time</a></li> <li><a href="/pa/jsref/dom_obj_url.html" title="HTML DOM انٹر یورل آؤٹپوائنٹ"><input> url</a></li> <li><a href="/pa/jsref/dom_obj_week.html" title="HTML DOM انٹر ویک آؤٹپوائنٹ"><input> week</a></li> <li><a href="/pa/jsref/dom_obj_kbd.html" title="HTML DOM کیبڈ آؤٹپوائنٹ"><kbd></a></li> <li><a href="/pa/jsref/dom_obj_label.html" title="HTML DOM لیبل آؤٹپوائنٹ"><label></a></li> <li><a href="/pa/jsref/dom_obj_legend.html" title="HTML DOM لیجینڈ آؤٹپوائنٹ"><legend></a></li> <li><a href="/pa/jsref/dom_obj_li.html" title="HTML DOM لی آؤٹپوائنٹ"><li></a></li> <li><a href="/pa/jsref/dom_obj_link.html" title="HTML DOM لینک آؤٹپوائنٹ"><link></a></li> <li><a href="/pa/jsref/dom_obj_map.html" title="HTML DOM ماپ آؤٹپوائنٹ"><map></a></li> <li><a href="/pa/jsref/dom_obj_mark.html" title="HTML DOM مارک آؤٹپوائنٹ"><mark></a></li> <li><a href="/pa/jsref/dom_obj_menu.html" title="HTML DOM منو آؤٹپوائنٹ"><menu></a></li> <li><a href="/pa/jsref/dom_obj_menuitem.html" title="HTML DOM منوی آئٹم آؤٹپوائنٹ"><menuitem></a></li> <li><a href="/pa/jsref/dom_obj_meta.html" title="HTML DOM میٹا آؤٹپوائنٹ"><meta></a></li> <li><a href="/pa/jsref/dom_obj_meter.html" title="HTML DOM میٹر آؤٹپوائنٹ"><meter></a></li> <li><a href="/pa/jsref/dom_obj_nav.html" title="HTML DOM ناف آؤٹپوائنٹ"><nav></a></li> <li><a href="/pa/jsref/dom_obj_object.html" title="HTML DOM آؤٹ پارامیکل آؤٹپوائنٹ"><object></a></li> <li><a href="/pa/jsref/dom_obj_ol.html" title="HTML DOM اول آؤٹپوائنٹ"><ol></a></li> <li><a href="/pa/jsref/dom_obj_optgroup.html" title="HTML DOM گروپ آپشن آؤٹپوائنٹ"><optgroup></a></li> <li><a href="/pa/jsref/dom_obj_option.html" title="HTML DOM آپشن آؤٹپوائنٹ"><option></a></li> <li><a href="/pa/jsref/dom_obj_output.html" title="HTML DOM آؤٹ پارامیکل آؤٹپوائنٹ"><output></a></li> <li><a href="/pa/jsref/dom_obj_paragraph.html" title="HTML DOM پاراگراف آؤٹپوائنٹ"><p></a></li> <li><a href="/pa/jsref/dom_obj_param.html" title="HTML DOM پارامیکل آؤٹپوائنٹ"><param></a></li> <li><a href="/pa/jsref/dom_obj_pre.html" title="HTML DOM پر آؤٹپوائنٹ"><pre></a></li> <li><a href="/pa/jsref/dom_obj_progress.html" title="HTML DOM پروگریس آؤٹپوائنٹ"><progress></a></li> <li><a href="/pa/jsref/dom_obj_quote.html" title="HTML DOM کوٹ آؤٹپوائنٹ"><q></a></li> <li><a href="/pa/jsref/dom_obj_s.html" title="HTML DOM S ਆਬਜੈਕਟ"><s></a></li> <li><a href="/pa/jsref/dom_obj_samp.html" title="HTML DOM Samp ਆਬਜੈਕਟ"><samp></a></li> <li><a href="/pa/jsref/dom_obj_script.html" title="HTML DOM Script ਆਬਜੈਕਟ"><script></a></li> <li><a href="/pa/jsref/dom_obj_section.html" title="HTML DOM Section ਆਬਜੈਕਟ"><section></a></li> <li><a href="/pa/jsref/dom_obj_select.html" title="HTML DOM Select ਆਬਜੈਕਟ"><select></a></li> <li><a href="/pa/jsref/dom_obj_small.html" title="HTML DOM Small ਆਬਜੈਕਟ"><small></a></li> <li><a href="/pa/jsref/dom_obj_source.html" title="HTML DOM Source ਆਬਜੈਕਟ"><source></a></li> <li><a href="/pa/jsref/dom_obj_span.html" title="HTML DOM Span ਆਬਜੈਕਟ"><span></a></li> <li><a href="/pa/jsref/dom_obj_strong.html" title="HTML DOM Strong ਆਬਜੈਕਟ"><strong></a></li> <li><a href="/pa/jsref/dom_obj_sub.html" title="HTML DOM Subscript ਆਬਜੈਕਟ"><sub></a></li> <li><a href="/pa/jsref/dom_obj_summary.html" title="HTML DOM Summary ਆਬਜੈਕਟ"><summary></a></li> <li><a href="/pa/jsref/dom_obj_sup.html" title="HTML DOM Superscript ਆਬਜੈਕਟ"><sup></a></li> <li><a href="/pa/jsref/dom_obj_table.html" title="HTML DOM Table ਆਬਜੈਕਟ"><table></a></li> <li><a href="/pa/jsref/dom_obj_tbody.html" title="HTML DOM TBody ਆਬਜੈਕਟ"><tbody></a></li> <li><a href="/pa/jsref/dom_obj_tabledata.html" title="HTML DOM TableData ਆਬਜੈਕਟ"><td></a></li> <li><a href="/pa/jsref/dom_obj_tfoot.html" title="HTML DOM TFoot ਆਬਜੈਕਟ"><tfoot></a></li> <li><a href="/pa/jsref/dom_obj_tablehead.html" title="HTML DOM TableHeader ਆਬਜੈਕਟ"><th></a></li> <li><a href="/pa/jsref/dom_obj_thead.html" title="HTML DOM THead ਆਬਜੈਕਟ"><thead></a></li> <li><a href="/pa/jsref/dom_obj_tablerow.html" title="HTML DOM TableRow ਆਬਜੈਕਟ"><tr></a></li> <li><a href="/pa/jsref/dom_obj_textarea.html" title="HTML DOM Textarea ਆਬਜੈਕਟ"><textarea></a></li> <li><a href="/pa/jsref/dom_obj_time.html" title="HTML DOM Time ਆਬਜੈਕਟ"><time></a></li> <li><a href="/pa/jsref/dom_obj_title.html" title="HTML DOM Title ਆਬਜੈਕਟ"><title></a></li> <li><a href="/pa/jsref/dom_obj_track.html" title="HTML DOM Track ਆਬਜੈਕਟ"><track></a></li> <li><a href="/pa/jsref/dom_obj_u.html" title="HTML DOM Underline ਆਬਜੈਕਟ"><u></a></li> <li><a href="/pa/jsref/dom_obj_ul.html" title="HTML DOM Ul ਆਬਜੈਕਟ"><ul></a></li> <li><a href="/pa/jsref/dom_obj_var.html" title="HTML DOM Variable ਆਬਜੈਕਟ"><var></a></li> <li><a href="/pa/jsref/dom_obj_video.html" title="HTML DOM Video ਆਬਜੈਕਟ"><video></a></li> </ul> <h2>其他参考手册</h2> <ul> <li><a href="/pa/jsref/obj_cssstyledeclaration.html" title="CSSStyleDeclaration ਆਬਜੈਕਟ">CSSStyleDeclaration</a></li> <li><a href="/pa/jsref/jsref_type_conversion.html" title="JavaScript ਟਾਈਪ ਕਨਵਰਸ਼ਨ">JS 类型转换</a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/pa/howto/index.html" title="CodeW3C.com ਦਾ ਕੰਪਲੀ ਕੋਸਟ">CodeW3C.com ਦਾ ਕੰਪਲੀ ਕੋਸਟ</a></li> </ul> </div> </div> <div id="maincontent"> <div class="idea"> <a href="/"><button>English</button></a> <a href="/zh/"><button>中文</button></a> <a href="/oldzh/"><button>繁體中文</button></a> <a href="/ru/"><button>Русский</button></a> <a href="/fr/"><button>Français</button></a> <a href="/de/"><button>Deutsch</button></a> <a href="/es/"><button>Español</button></a> <a href="/pt/"><button>Português</button></a> <a href="/ja/"><button>日本語</button></a> <a href="/ko/"><button>한국어</button></a> <a href="/it/"><button>Italiano</button></a> <a href="/ar/"><button>عربي</button></a> <a href="/hi/"><button>हिंदी</button></a> <a href="/bn/"><button>বাংলা</button></a> <a href="/ms/"><button>Bahasa Malaysia</button></a> <a href="/my/"><button>မြန်မာ</button></a> <a href="/vi/"><button>Tiếng Việt</button></a> <a href="/th/"><button>ภาษาไทย</button></a> <a href="/lo/"><button>ລາວ</button></a> <a href="/id/"><button>Bahasa Indonesia</button></a> <a href="/ur/"><button>اردو</button></a> <a href="/ha/"><button>Hausa</button></a> <a href="/pl/"><button>Język polski</button></a> <a href="/pa/"><button>ਪੰਜਾਬੀ</button></a> <a href="/sv/"><button>Svenska</button></a> <a href="/da/"><button>Dansk</button></a> <a href="/nl/"><button>Nederlands</button></a> <a href="/tr/"><button>Türkçe</button></a> <a href="/fi/"><button>suom.</button></a> <a href="/el/"><button>Ελληνικά</button></a> <a href="/fa/"><button>فارسی</button></a> <a href="/sw/"><button>Kiswahili</button></a> <a href="/te/"><button>తెలుగు</button></a> <a href="/tl/"><button>wikang Galu</button></a> </div> <h1>Canvas textBaseline 属性</h1> <div class="btn-toref"> <p><a href="/pa/jsref/api_canvas.html">Canvas ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ</a></p> </div> <div> <h2>定义和用法</h2> <p>textBaseline 属性设置或返回在绘制文本时的当前文本基线。</p> <p>ਨਿਮਨ ਚਿੱਤਰ ਨੇ 'textBaseline' ਪ੍ਰਤੀਭਾਵ ਦੀਆਂ ਸਮਰਥਤਾਂ ਨੂੰ ਦਰਸਾਇਆ ਹੈ:</p> <img src="/i/textBaseline.gif" alt="文本基线图示" style="margin-left:0; margin-bottom:20px;" /> <p class="note"><span>ਟਿੱਪਣੀਆਂ:</span><a href="/pa/tags/canvas_filltext.html" title="HTML5 canvas fillRect() ਮੱਥਦਾਨ">fillText()</a> ਜਾਂ <a href="/pa/tags/canvas_stroketext.html" title="HTML5 canvas strokeText() ਮੱਥਦਾਨ">strokeText()</a> ਮੰਚ 'textBaseline' ਮੁੱਲ ਨੂੰ ਸਥਾਪਤ ਕਰਦੇ ਹੋਏ ਲੇਖ ਨੂੰ ਸਥਾਨਿਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਵੇਗਾ。</p> </div> <div> <h2>ਉਦਾਹਰਣ</h2> <p>ਨੀਲੇ ਰੰਗ ਨਾਲ ਪੂਰਣ ਚੌਰਾਗਢੀ ਦਫ਼ਤਰ ਦੇਣਾ:</p> <canvas id="myCanvas" width="400" height="200" style="border:1px solid #d3d3d3;background:#ffffff; margin-top:20px;"> ਤੁਹਾਡਾ ਬਰਾਉਜ਼ਰ canvas ਟੈਗ ਨਹੀਂ ਸਮਰਥਨ ਕਰਦਾ ਹੈ。 </canvas> <script> var c=document.getElementById("myCanvas"); var canvOK=1; try {c.getContext("2d");} catch (er) {canvOK=0;} if (canvOK==1) { 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); } </script> <p>JavaScript:</p> <pre class="language-js"> 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); </pre> <p class="tiy"><a target="_blank" href="/pa/tiy/t.html?f=eg_html5_canvas_textbaseline">ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ</a></p> </div> <div> <h2>ਵਿਧੀ</h2> <pre><i>context</i>.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";</pre> <h3>ਪ੍ਰਤੀਭਾਵ</h3> <table class="dataintable"> <tr> <th style="width:25%;">ਮੁੱਲ</th> <th>ਵਰਣਨ</th> </tr> <tr> <td>alphabetic</td> <td>ਮੂਲਤਵਾਰ: ਲੇਖ ਬੇਸ ਲਾਈਨ ਆਮ ਅੱਖਰ ਬੇਸ ਲਾਈਨ ਹੈ。</td> </tr> <tr> <td>top</td> <td>ਲੇਖ ਬੇਸ ਲਾਈਨ ਈਮ ਫਲੈਕਸ ਦੇ ਉੱਪਰ ਹੈ。</td> </tr> <tr> <td>hanging</td> <td>ਲੇਖ ਬੇਸ ਲਾਈਨ ਲਹੜੀ ਲਾਈਨ ਹੈ。</td> </tr> <tr> <td>middle</td> <td>ਲੇਖ ਬੇਸ ਲਾਈਨ ਈਮ ਫਲੈਕਸ ਦੇ ਮੱਧ ਵਿੱਚ ਹੈ。</td> </tr> <tr> <td>ideographic</td> <td>ਲੇਖ ਬੇਸ ਲਾਈਨ ਅਰਥਵਾਧੂ ਲਾਈਨ ਹੈ。</td> </tr> <tr> <td>bottom</td> <td>ਲੇਖ ਬੇਸ ਲਾਈਨ ਈਮ ਫਲੈਕਸ ਦੇ ਨੀਚੇ ਹੈ。</td> </tr> </table> </div> <div> <h2>ਤਕਨੀਕੀ ਵੇਰਵਾ</h2> <table class="definition-usage"> <tr> <th style="width: 25%;">ਮੂਲ ਮੁੱਲ:</th> <td>alphabetic</td> </tr> </table> </div> <div> <h2>ਬਰਾਉਜ਼ਰ ਸਮਰਥਨ</h2> <p>ਇਸ ਤਾਲਿਕੇ ਵਿੱਚ ਸੰਖਿਆਵਾਂ ਦੇ ਪਹਿਲੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਇਸ ਗੁਣ ਨੂੰ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਬਰਾਉਜ਼ਰ ਦੀ ਸੰਸਕਰਣ ਦਿੱਤੀ ਗਈ ਹੈ。</p> <table class="browser-support"> <tr> <th class="bsChrome">ਚਰਮੀ</th> <th class="bsEdge">ਐਜ਼</th> <th class="bsFirefox">ਫਾਇਰਫਾਕਸ</th> <th class="bsSafari">ਸਫਾਰੀ</th> <th class="bsOpera">ਓਪਰਾ</th> </tr> <tr> <td>ਚਰਮੀ</td> <td>ਐਜ਼</td> <td>ਫਾਇਰਫਾਕਸ</td> <td>ਸਫਾਰੀ</td> <td>ਓਪਰਾ</td> </tr> <tr> <td>4.0</td> <td>9.0</td> <td>3.6</td> <td>4.0</td> <td>10.1</td> </tr> </table> <p class="note"><span>ਟਿੱਪਣੀਆਂ:</span>Internet Explorer 8 ਅਤੇ ਛੇਤੀ ਤੋਂ ਪਹਿਲਾਂ ਦੀਆਂ ਸੰਸਕਰਣਾਂ <canvas> ਐਲੀਮੈਂਟ ਨੂੰ ਸਮਰਥਨ ਨਹੀਂ ਦਿੰਦੇ ਹਨ。</p> </div> <div class="btn-toref"> <p><a href="/pa/jsref/api_canvas.html">Canvas ਰੈਫਰੈਂਸ ਮੈਨੂਅਲ</a></p> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div>  <div id="sidebar"> <div><h3><center> ਟੂਲਬਾਕਸ </center><h3> <h5 id="tools_reference"><a href="/pa/jsref/index.html">جاوا اسکریپت و ایچ تی ام ال DOM رفرنس مانیول</a></h5> <h5 id="tools_example"><a href="/pa/js/js_examples.html">JavaScript ਇੰਸਟੈਂਸ</a></h5> <h5 id="tools_quiz"><a href="/pa/js/js_quiz.html">JavaScript ਟੈਸਟ</a></h5> <h5 id="tools_tutorial"><a href="/pa/js/index.html">JavaScript ਸਿੱਖਿਆ</a></h5> </div> <div><h3><center> ਸਪਾਂਸਰ ਲਿੰਕ </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> CodeW3C.com ਵੱਲੋਂ ਪ੍ਰਦਾਨ ਕੀਤੀ ਗਈ ਸਮਗਰੀ ਸਿਖਲਾਈ ਅਤੇ ਟੈਸਟ ਲਈ ਹੈ, ਸਮਗਰੀ ਦੀ ਸਹੀ ਹੋਣ ਦੀ ਗਾਰੰਟੀ ਨਹੀਂ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ।ਇਸ ਸਾਇਟ ਦੀ ਸਮਗਰੀ ਦੀ ਵਰਤੋਂ ਨਾਲ ਆਉਣ ਵਾਲੇ ਜੋਖਮ ਇਸ ਸਾਇਟ ਨਾਲ ਨਹੀਂ ਸਬੰਧਤ ਹਨ।ਸਾਰੇ ਹਕਾਇਤਾਂ, ਸਾਰੇ ਹੱਕ ਰਾਖਵੇਂ ਕੀਤੇ ਗਏ ਹਨ। </p> <p id="p2"> <a href="/pa/about/index.html" title="ਬਾਰੇ CodeW3C.com">ਬਾਰੇ CodeW3C.com</a> <a href="/pa/about/about_helping.html" title="ਮਦਦ CodeW3C.com">ਮਦਦ CodeW3C.com</a> <a href="/pa/about/about_use.html" title="ਬਾਰੇ ਵਰਤੋਂ">ਵਰਤੋਂ ਸ਼ਰਤਾਂ</a> <a href="/pa/about/about_privacy.html" title="ਬਾਰੇ ਗੁੱਪੀ">ਗੁੱਪੀ ਸ਼ਰਤਾਂ</a> <a href="http://www.comfortsoftwaregroup.com/" target="_blank"><img src="/comfortsoftwaregroup.png"></a> <a href="http://www.ce4e.com/" target="_blank"><img src="/poweredby.png" alt="با سی ای 4 ای کام پاورد"></a> </p> </div> </div>  <script src="/myjs/tongji.js"></script> </body> </html>