HTML canvas translate() 方法

သုတေသန စာတမ်း

ကိုးကွယ် စကားရပ် စာအုပ်

HTML ချက်

-

</a></li> <li><a href="/my/tags/tag_img.html" title="ဟန်တီလို <img> ခွဲခ�မ်း"><img></a></li> <li><a href="/my/tags/tag_input.html" title="ဟန်တီလို <input> ခွဲခ�မ်း"><input></a></li> <li><a href="/my/tags/tag_ins.html" title="ဟန်တီလို <ins> ခွဲခ�မ်း"><ins></a></li> <li><a href="/my/tags/tag_kbd.html" title="ဟန်တီလို <kbd> ခွဲခ�မ်း"><kbd></a></li> <li><a href="/my/tags/tag_label.html" title="ဟန်တီလို <label> ခွဲခ�မ်း"><label></a></li> <li><a href="/my/tags/tag_legend.html" title="ဟန်တီလို <legend> ခွဲခ�မ်း"><legend></a></li> <li><a href="/my/tags/tag_li.html" title="ဟန်တီလို <li> ခွဲခ�မ်း"><li></a></li> <li><a href="/my/tags/tag_link.html" title="ဟန်တီလို <link> ခွဲခ�မ်း"><link></a></li> <li><a href="/my/tags/tag_main.html" title="ဟန်တီလို <main> ခွဲခ�မ်း"><main></a></li> <li><a href="/my/tags/tag_map.html" title="ဟန်တီလို <map> ခွဲခ�မ်း"><map></a></li> <li><a href="/my/tags/tag_mark.html" title="ဟန်တီလို <mark> ခွဲခ�မ်း"><mark></a></li> <li><a href="/my/tags/tag_menu.html" title="ဟန်တီလို <menu> ခွဲခ�မ်း"><menu></a></li> <li><a href="/my/tags/tag_meta.html" title="ဟန်တီလို <meta> ခွဲခ�မ်း"><meta></a></li> <li><a href="/my/tags/tag_meter.html" title="ဟန်တီလို <meter> ခွဲခ�မ်း"><meter></a></li> <li><a href="/my/tags/tag_nav.html" title="ဟန်တီလို <nav> ခွဲခ�မ်း"><nav></a></li> <li><a href="/my/tags/tag_noframes.html" title="ဟန်တီလို <noframes> ခွဲခ�မ်း"><noframes></a></li> <li><a href="/my/tags/tag_noscript.html" title="ဟန်တီလို <noscript> ခွဲခ�မ်း"><noscript></a></li> <li><a href="/my/tags/tag_object.html" title="ဟန်တီလို <object> ခွဲခ�မ်း"><object></a></li> <li><a href="/my/tags/tag_ol.html" title="ဟန်တီလို <ol> ခွဲခ�မ်း"><ol></a></li> <li><a href="/my/tags/tag_optgroup.html" title="ဟန်တီလို <optgroup> ခွဲခ�မ်း"><optgroup></a></li> <li><a href="/my/tags/tag_option.html" title="ဟန်တီလို <option> ခွဲခ�မ်း"><option></a></li> <li><a href="/my/tags/tag_output.html" title="ဟန်တီလို <output> ခွဲခ�မ်း"><output></a></li> <li><a href="/my/tags/tag_p.html" title="ဟန်တီလို <p> ခွဲခ�မ်း"><p></a></li> <li><a href="/my/tags/tag_param.html" title="ဟန်တီလို <param> ခွဲခ�မ်း"><param></a></li> <li><a href="/my/tags/tag_picture.html" title="ဟန်တီလို <picture> ခွဲခ�မ်း"><picture></a></li> <li><a href="/my/tags/tag_pre.html" title="ဟန်တီလို <pre> ခွဲခ�မ်း"><pre></a></li> <li><a href="/my/tags/tag_progress.html" title="ဟန်တီလို <progress> ခွဲခ�မ်း"><progress></a></li> <li><a href="/my/tags/tag_q.html" title="ဟန်တီလို <q> ခွဲခ�မ်း"><q></a></li> <li><a href="/my/tags/tag_rp.html" title="ဟန်တီလို <rp> ခွဲခ�မ်း"><rp></a></li> <li><a href="/my/tags/tag_rt.html" title="ဟန်တီလို <rt> ခွဲခ�မ်း"><rt></a></li> <li><a href="/my/tags/tag_ruby.html" title="ဟန်တီလို <ruby> ခွဲခ�မ်း"><ruby></a></li> <li><a href="/my/tags/tag_s.html" title="ဟန်တီလို <s> ခွဲခ�မ်း"><s></a></li> <li><a href="/my/tags/tag_samp.html" title="ဟန်တီလို <samp> ခွဲခ�မ်း"><samp></a></li> <li><a href="/my/tags/tag_script.html" title="ဟန်တီလို <script> ခွဲခ�မ်း"><script></a></li> <li><a href="/my/tags/tag_search.html" title="ဟန်တီလို <search> ခွဲခ�မ်း"><search></a></li> <li><a href="/my/tags/tag_section.html" title="ဟန်တီလို <section> ခွဲခ�မ်း"><section></a></li> <li><a href="/my/tags/tag_select.html" title="ဟန်တီလို <select> ခွဲခ�မ်း"><select></a></li> <li><a href="/my/tags/tag_small.html" title="ဟန်တီလို <small> ခွဲခ�မ်း"><small></a></li> <li><a href="/my/tags/tag_source.html" title="ဟန်တီလို <source> ခွဲခ�မ်း"><source></a></li> <li><a href="/my/tags/tag_span.html" title="ဟန်တီလို <span> ခွဲခ�မ်း"><span></a></li> <li><a href="/my/tags/tag_strike.html" title="ဟန်တီလို <strike> ခွဲခ�မ်း"><strike></a></li> <li><a href="/my/tags/tag_strong.html" title="ဟန်တီလို <strong> ခွဲခ�မ်း"><strong></a></li> <li><a href="/my/tags/tag_style.html" title="HTML <style> အချက်"><style></a></li> <li><a href="/my/tags/tag_sub.html" title="HTML <sub> အချက်"><sub></a></li> <li><a href="/my/tags/tag_summary.html" title="HTML <summary> အချက်"><summary></a></li> <li><a href="/my/tags/tag_sup.html" title="HTML <sup> အချက်"><sup></a></li> <li><a href="/my/tags/tag_svg.html" title="HTML <svg> အချက်"><svg></a></li> <li><a href="/my/tags/tag_table.html" title="HTML <table> အချက်"><table></a></li> <li><a href="/my/tags/tag_tbody.html" title="HTML <tbody> အချက်"><tbody></a></li> <li><a href="/my/tags/tag_td.html" title="HTML <td> အချက်"><td></a></li> <li><a href="/my/tags/tag_template.html" title="HTML <template> အချက်"><template></a></li> <li><a href="/my/tags/tag_textarea.html" title="HTML <textarea> အချက်"><textarea></a></li> <li><a href="/my/tags/tag_tfoot.html" title="HTML <tfoot> အချက်"><tfoot></a></li> <li><a href="/my/tags/tag_th.html" title="HTML <th> အချက်"><th></a></li> <li><a href="/my/tags/tag_thead.html" title="HTML <thead> အချက်"><thead></a></li> <li><a href="/my/tags/tag_time.html" title="HTML <time> အချက်"><time></a></li> <li><a href="/my/tags/tag_title.html" title="HTML <title> အချက်"><title></a></li> <li><a href="/my/tags/tag_tr.html" title="HTML <tr> အချက်"><tr></a></li> <li><a href="/my/tags/tag_track.html" title="HTML <track> အချက်"><track></a></li> <li><a href="/my/tags/tag_tt.html" title="HTML <tt> အချက်"><tt></a></li> <li><a href="/my/tags/tag_u.html" title="HTML <u> အချက်"><u></a></li> <li><a href="/my/tags/tag_ul.html" title="HTML <ul> အချက်"><ul></a></li> <li><a href="/my/tags/tag_var.html" title="HTML <var> အချက်"><var></a></li> <li><a href="/my/tags/tag_video.html" title="HTML <video> အချက်"><video></a></li> <li><a href="/my/tags/tag_wbr.html" title="HTML <wbr> အချက်"><wbr></a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/my/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>HTML canvas translate() 方法</h1> <div class="backtoreference"> <p><a href="/my/tags/html_ref_canvas.html">HTML5 Canvas ကိုယ်စား</a></p> </div> <div> <h2>定义和用法</h2> <p><code>translate()</code> 方法重新映射画布上的 (0,0) 位置。</p> <p class="note"><span>မှတ်ချက်：</span>当您在 translate() 之后调用诸如 <a href="/my/tags/canvas_fillrect.html" title="HTML canvas fillRect() နည်းပါး">fillRect()</a> 之类的方法时，值会添加到 <i>x</i> 和 <i>y</i> 坐标值上。</p> <img src="/i/translate.gif" alt="translate() စကားရပ်၏ ပုံများ" /> </div> <div> <h2>实例</h2> <p>在位置 (10,10) 处绘制一个矩形，将新的 (0,0) 位置设置为 (70,70)。再次绘制新的矩形（请注意现在矩形从位置 (80,80) 开始绘制）：</p> <canvas id="myCanvas" class="canvas_example"> Your browser does not support the HTML5 canvas tag. </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"); ctx.fillRect(10,10,100,50); ctx.translate(70,70); ctx.fillRect(10,10,100,50); } </script> <p>JavaScript:</p> <pre class="language-js"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillRect(10,10,100,50); <mark>ctx.translate(70,70);</mark> ctx.fillRect(10,10,100,50); </pre> <p class="tiy"><a target="_blank" href="/my/tiy/t.html?f=eg_html5_canvas_translate">亲自试一试</a></p> </div> <div> <h2>语法</h2> <pre>context.translate(<i>x</i>,<i>y</i>);</pre> <h3>参数值</h3> <table class="dataintable"> <tr> <th style="width:25%;">参数</th> <th>描述</th> </tr> <tr> <td><i>x</i></td> <td>添加到水平坐标（x）上的值。</td> </tr> <tr> <td><i>y</i></td> <td>添加到垂直坐标（y）上的值。</td> </tr> </table> </div> <div> <h2>浏览器支持</h2> <p>表中的数字注明了首个完全支持该属性的浏览器版本。</p> <table class="browser-support"> <tr> <th class="bsChrome">Chrome</th> <th class="bsEdge">Edge</th> <th class="bsFirefox">Firefox</th> <th class="bsSafari">Safari</th> <th class="bsOpera">Opera</th> </tr> <tr> <td>Chrome</td> <td>Edge</td> <td>Firefox</td> <td>Safari</td> <td>Opera</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="backtoreference"> <p><a href="/my/tags/html_ref_canvas.html">HTML5 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="/my/tags/index.html">HTML ကိုယ်စား</a></h5> <h5 id="tools_example"><a href="/my/html/html_examples.html">HTML အမှတ်ပေး</a></h5> <h5 id="tools_quiz"><a href="/my/html/html_quiz.html">HTML စမ်းသပ်</a></h5> <h5 id="tools_tutorial"><a href="/my/html/index.html">HTML အခြေခံ</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="/my/about/index.html" title="ကိုယ်ပိုင် CodeW3C.com">ကိုယ်ပိုင် CodeW3C.com</a> <a href="/my/about/about_helping.html" title="အကူအညီ CodeW3C.com">အကူအညီ CodeW3C.com</a> <a href="/my/about/about_use.html" title="အသုံးပြုခြင်း အချက်">အသုံးပြုခြင်း အချက်</a> <a href="/my/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="Ce4e.com က ထောက်ပံ့ပေး"></a> </p> </div> </div>  <script src="/myjs/tongji.js"></script> </body> </html>