Mafunzo ya CodeW3C Online
Mafunzo ya HTML
Mashairi ya Kifungu cha Kifungu
Mashairi ya Mtu wa Serikali
Mafunzo ya Programming
Mafunzo ya XML
Mafunzo ya Kurejea Taarifa
Mafunzo ya Kitabu cha Mwongozo
Makala ya Kusoma
Mafunzo ya Kitabu cha Mwongozo
Vifungo vya HTML (Kisayari cha Herufi)
Vifungo vya HTML (Kisayari cha Funuo)
Matumizi ya Kifungu cha HTML
Mafunzo ya Makadara ya Kifungu cha Kifungu cha Kifungu cha HTML
Matukio ya HTML
Mafunzo ya Jina la rangi la HTML
Canvas ya HTML
Video na Audio ya HTML
Mafunzo ya Mada ya Kifungu cha Kifungu cha Kifungu cha HTML
Jadwala ya Habari ya HTML
Mafunzo ya Kichwako cha URL ya HTML
Kodi ya Lugha ya HTML
Kodi ya Dola ya HTML
Jadwala ya HTTP
Muhimu wa HTTP
键盘快捷键
HTML Tafuta
<!-->
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> - <h6>
<head>
<header>
<hgroup>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
</a></li> <li><a href="/sw/tags/tag_noscript.html" title="Tafuta <noscript> ya HTML"><noscript></a></li> <li><a href="/sw/tags/tag_object.html" title="Tafuta <object> ya HTML"><object></a></li> <li><a href="/sw/tags/tag_ol.html" title="Tafuta <ol> ya HTML"><ol></a></li> <li><a href="/sw/tags/tag_optgroup.html" title="Tafuta <optgroup> ya HTML"><optgroup></a></li> <li><a href="/sw/tags/tag_option.html" title="Tafuta <option> ya HTML"><option></a></li> <li><a href="/sw/tags/tag_output.html" title="Tafuta <output> ya HTML"><output></a></li> <li><a href="/sw/tags/tag_p.html" title="Tafuta <p> ya HTML"><p></a></li> <li><a href="/sw/tags/tag_param.html" title="Tafuta <param> ya HTML"><param></a></li> <li><a href="/sw/tags/tag_picture.html" title="Tafuta <picture> ya HTML"><picture></a></li> <li><a href="/sw/tags/tag_pre.html" title="Tafuta <pre> ya HTML"><pre></a></li> <li><a href="/sw/tags/tag_progress.html" title="Tafuta <progress> ya HTML"><progress></a></li> <li><a href="/sw/tags/tag_q.html" title="Tafuta <q> ya HTML"><q></a></li> <li><a href="/sw/tags/tag_rp.html" title="Tafuta <rp> ya HTML"><rp></a></li> <li><a href="/sw/tags/tag_rt.html" title="Tafuta <rt> ya HTML"><rt></a></li> <li><a href="/sw/tags/tag_ruby.html" title="Tafuta <ruby> ya HTML"><ruby></a></li> <li><a href="/sw/tags/tag_s.html" title="Tafuta <s> ya HTML"><s></a></li> <li><a href="/sw/tags/tag_samp.html" title="Tafuta <samp> ya HTML"><samp></a></li> <li><a href="/sw/tags/tag_script.html" title="Tafuta <script> ya HTML"><script></a></li> <li><a href="/sw/tags/tag_search.html" title="Tafuta <search> ya HTML"><search></a></li> <li><a href="/sw/tags/tag_section.html" title="Tafuta <section> ya HTML"><section></a></li> <li><a href="/sw/tags/tag_select.html" title="Tafuta <select> ya HTML"><select></a></li> <li><a href="/sw/tags/tag_small.html" title="Tafuta <small> ya HTML"><small></a></li> <li><a href="/sw/tags/tag_source.html" title="Tafuta <source> ya HTML"><source></a></li> <li><a href="/sw/tags/tag_span.html" title="Tafuta <span> ya HTML"><span></a></li> <li><a href="/sw/tags/tag_strike.html" title="Tafuta <strike> ya HTML"><strike></a></li> <li><a href="/sw/tags/tag_strong.html" title="Tafuta <strong> ya HTML"><strong></a></li> <li><a href="/sw/tags/tag_style.html" title="Tafuta <style> ya HTML"><style></a></li> <li><a href="/sw/tags/tag_sub.html" title="HTML <sub> yaani"><sub></a></li> <li><a href="/sw/tags/tag_summary.html" title="HTML <summary> yaani"><summary></a></li> <li><a href="/sw/tags/tag_sup.html" title="HTML <sup> yaani"><sup></a></li> <li><a href="/sw/tags/tag_svg.html" title="HTML <svg> yaani"><svg></a></li> <li><a href="/sw/tags/tag_table.html" title="HTML <table> yaani"><table></a></li> <li><a href="/sw/tags/tag_tbody.html" title="HTML <tbody> yaani"><tbody></a></li> <li><a href="/sw/tags/tag_td.html" title="HTML <td> yaani"><td></a></li> <li><a href="/sw/tags/tag_template.html" title="HTML <template> yaani"><template></a></li> <li><a href="/sw/tags/tag_textarea.html" title="HTML <textarea> yaani"><textarea></a></li> <li><a href="/sw/tags/tag_tfoot.html" title="HTML <tfoot> yaani"><tfoot></a></li> <li><a href="/sw/tags/tag_th.html" title="HTML <th> yaani"><th></a></li> <li><a href="/sw/tags/tag_thead.html" title="HTML <thead> yaani"><thead></a></li> <li><a href="/sw/tags/tag_time.html" title="HTML <time> yaani"><time></a></li> <li><a href="/sw/tags/tag_title.html" title="HTML <title> yaani"><title></a></li> <li><a href="/sw/tags/tag_tr.html" title="HTML <tr> yaani"><tr></a></li> <li><a href="/sw/tags/tag_track.html" title="HTML <track> yaani"><track></a></li> <li><a href="/sw/tags/tag_tt.html" title="HTML <tt> yaani"><tt></a></li> <li><a href="/sw/tags/tag_u.html" title="HTML <u> yaani"><u></a></li> <li><a href="/sw/tags/tag_ul.html" title="HTML <ul> yaani"><ul></a></li> <li><a href="/sw/tags/tag_var.html" title="HTML <var> yaani"><var></a></li> <li><a href="/sw/tags/tag_video.html" title="HTML <video> yaani"><video></a></li> <li><a href="/sw/tags/tag_wbr.html" title="HTML <wbr> yaani"><wbr></a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/sw/howto/index.html" title="Kigecheza CodeW3C.com">Kigecheza 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 setTransform() 方法</h1> <div class="backtoreference"> <p><a href="/sw/tags/html_ref_canvas.html">Makala ya kuelewa ya HTML5 Canvas</a></p> </div> <div> <h2>定义和用法</h2> <p>画布上的每个对象都拥有一个当前的变换矩阵。</p> <p><code>setTransform()</code> 方法把当前的变换矩阵重置为单位矩阵，然后以相同的参数运行 <a href="/sw/tags/canvas_transform.html" title="HTML5 canvas transform() method">transform()</a>。</p> <p>换句话说，setTransform() 允许您缩放、旋转、移动并倾斜当前的环境。</p> <p class="note"><span>Kasho:</span>该变换只会影响 setTransform() 方法调用之后的绘图。</p> </div> <div> <h2>实例</h2> <p>绘制一个矩形，通过 setTransform() 重置并创建新的变换矩阵，再次绘制矩形，重置并创建新的变换矩阵，然后再次绘制矩形。请注意，每当您调用 setTransform() 时，它都会重置前一个变换矩阵然后构建新的矩阵，因此在下面的例子中，不会显示红色矩形，因为它在蓝色矩形下面：</p> <canvas id="myCanvas" class="canvas_example"> Kifungu chako hauku kushika 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 c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="yellow"; ctx.fillRect(0,0,250,100) ctx.setTransform(1,0.5,-0.5,1,30,10); ctx.fillStyle="red"; ctx.fillRect(0,0,250,100); ctx.setTransform(1,0.5,-0.5,1,30,10); ctx.fillStyle="blue"; ctx.fillRect(0,0,250,100); } </script> <p>JavaScript:</p> <pre class="language-js"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="yellow"; ctx.fillRect(0,0,250,100) <mark>ctx.setTransform(1,0.5,-0.5,1,30,10);</mark> ctx.fillStyle="red"; ctx.fillRect(0,0,250,100); <mark>ctx.setTransform(1,0.5,-0.5,1,30,10);</mark> ctx.fillStyle="blue"; ctx.fillRect(0,0,250,100); </pre> <p class="tiy"><a target="_blank" href="/sw/tiy/t.html?f=eg_html5_canvas_setTransform">亲自试一试</a></p> </div> <div> <h2>语法</h2> <pre>context.setTransform(<i>a</i>,<i>b</i>,<i>c</i>,<i>d</i>,<i>e</i>,<i>f</i>);</pre> <h3>参数值</h3> <table class="dataintable"> <tr> <th style="width:25%;">参数</th> <th>描述</th> </tr> <tr> <td><i>a</i></td> <td>水平旋转绘图。</td> </tr> <tr> <td><i>b</i></td> <td>水平倾斜绘图。</td> </tr> <tr> <td><i>c</i></td> <td>垂直倾斜绘图。</td> </tr> <tr> <td><i>d</i></td> <td>垂直缩放绘图。</td> </tr> <tr> <td><i>e</i></td> <td>水平移动绘图。</td> </tr> <tr> <td><i>f</i></td> <td>垂直移动绘图。</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>Kasho:</span>Internet Explorer 8 na zaidi ya zake hazifadilika <canvas> elementi.</p> </div> <div class="backtoreference"> <p><a href="/sw/tags/html_ref_canvas.html">Makala ya kuelewa ya HTML5 Canvas</a></p> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div> <!-- maincontent end --> <div id="sidebar"> <div><h3><center> Kifaa cha kufaa </center><h3> <h5 id="tools_reference"><a href="/sw/tags/index.html">Makala ya kuelewa ya HTML</a></h5> <h5 id="tools_example"><a href="/sw/html/html_examples.html">Mifano ya HTML</a></h5> <h5 id="tools_quiz"><a href="/sw/html/html_quiz.html">Mazoezi ya HTML</a></h5> <h5 id="tools_tutorial"><a href="/sw/html/index.html">Mafunzo ya HTML</a></h5> </div> <div><h3><center> Mwongozo wa mshambulizi </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> Kigecheza CodeW3C.com ina kusaidia kwa mafunzo na michezo, hataa kusahau kweli wa mawasiliano. Risiko zilizotumika kwa kusaidia kwa kigecheza hizi hayafikii kigecheza. Hataisha na hisia zote. Hataisha na hisia zote. </p> <p id="p2"> <a href="/sw/about/index.html" title="Kuhusu CodeW3C.com">Kuhusu CodeW3C.com</a> <a href="/sw/about/about_helping.html" title="Msaada CodeW3C.com">Msaada CodeW3C.com</a> <a href="/sw/about/about_use.html" title="Kuhusu kutumia">Shabaha za kutumia</a> <a href="/sw/about/about_privacy.html" title="Kuhusu habari za kip私">Shabaha za kip私</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="Inaruhusi na Ce4e.com"></a> </p> </div> </div> <!-- wrapper end --> <script src="/myjs/tongji.js"></script> </body> </html>