HTML canvas getImageData() 方法

Time Table

Kitabu cha Mafunzo

HTML Tag

</a></li> <li><a href="/sw/tags/tag_img.html" title="Tebili <img> ya HTML"><img></a></li> <li><a href="/sw/tags/tag_input.html" title="Tebili <input> ya HTML"><input></a></li> <li><a href="/sw/tags/tag_ins.html" title="Tebili <ins> ya HTML"><ins></a></li> <li><a href="/sw/tags/tag_kbd.html" title="Tebili <kbd> ya HTML"><kbd></a></li> <li><a href="/sw/tags/tag_label.html" title="Tebili <label> ya HTML"><label></a></li> <li><a href="/sw/tags/tag_legend.html" title="Tebili <legend> ya HTML"><legend></a></li> <li><a href="/sw/tags/tag_li.html" title="Tebili <li> ya HTML"><li></a></li> <li><a href="/sw/tags/tag_link.html" title="Tebili <link> ya HTML"><link></a></li> <li><a href="/sw/tags/tag_main.html" title="Tebili <main> ya HTML"><main></a></li> <li><a href="/sw/tags/tag_map.html" title="Tebili <map> ya HTML"><map></a></li> <li><a href="/sw/tags/tag_mark.html" title="Tebili <mark> ya HTML"><mark></a></li> <li><a href="/sw/tags/tag_menu.html" title="Tebili <menu> ya HTML"><menu></a></li> <li><a href="/sw/tags/tag_meta.html" title="Tebili <meta> ya HTML"><meta></a></li> <li><a href="/sw/tags/tag_meter.html" title="Tebili <meter> ya HTML"><meter></a></li> <li><a href="/sw/tags/tag_nav.html" title="Tebili <nav> ya HTML"><nav></a></li> <li><a href="/sw/tags/tag_noframes.html" title="Tebili <noframes> ya HTML"><noframes></a></li> <li><a href="/sw/tags/tag_noscript.html" title="Tebili <noscript> ya HTML"><noscript></a></li> <li><a href="/sw/tags/tag_object.html" title="Tebili <object> ya HTML"><object></a></li> <li><a href="/sw/tags/tag_ol.html" title="Tebili <ol> ya HTML"><ol></a></li> <li><a href="/sw/tags/tag_optgroup.html" title="Tebili <optgroup> ya HTML"><optgroup></a></li> <li><a href="/sw/tags/tag_option.html" title="Tebili <option> ya HTML"><option></a></li> <li><a href="/sw/tags/tag_output.html" title="Tebili <output> ya HTML"><output></a></li> <li><a href="/sw/tags/tag_p.html" title="Tebili <p> ya HTML"><p></a></li> <li><a href="/sw/tags/tag_param.html" title="Tebili <param> ya HTML"><param></a></li> <li><a href="/sw/tags/tag_picture.html" title="Tebili <picture> ya HTML"><picture></a></li> <li><a href="/sw/tags/tag_pre.html" title="Tebili <pre> ya HTML"><pre></a></li> <li><a href="/sw/tags/tag_progress.html" title="Tebili <progress> ya HTML"><progress></a></li> <li><a href="/sw/tags/tag_q.html" title="Tebili <q> ya HTML"><q></a></li> <li><a href="/sw/tags/tag_rp.html" title="Tebili <rp> ya HTML"><rp></a></li> <li><a href="/sw/tags/tag_rt.html" title="Tebili <rt> ya HTML"><rt></a></li> <li><a href="/sw/tags/tag_ruby.html" title="Tebili <ruby> ya HTML"><ruby></a></li> <li><a href="/sw/tags/tag_s.html" title="Tebili <s> ya HTML"><s></a></li> <li><a href="/sw/tags/tag_samp.html" title="Tebili <samp> ya HTML"><samp></a></li> <li><a href="/sw/tags/tag_script.html" title="Tebili <script> ya HTML"><script></a></li> <li><a href="/sw/tags/tag_search.html" title="Tebili <search> ya HTML"><search></a></li> <li><a href="/sw/tags/tag_section.html" title="Tebili <section> ya HTML"><section></a></li> <li><a href="/sw/tags/tag_select.html" title="Tebili <select> ya HTML"><select></a></li> <li><a href="/sw/tags/tag_small.html" title="Tebili <small> ya HTML"><small></a></li> <li><a href="/sw/tags/tag_source.html" title="Tebili <source> ya HTML"><source></a></li> <li><a href="/sw/tags/tag_span.html" title="Tebili <span> ya HTML"><span></a></li> <li><a href="/sw/tags/tag_strike.html" title="Tebili <strike> ya HTML"><strike></a></li> <li><a href="/sw/tags/tag_strong.html" title="Tebili <strong> ya HTML"><strong></a></li> <li><a href="/sw/tags/tag_style.html" title="Tebili <style> kinachotengwa"><style></a></li> <li><a href="/sw/tags/tag_sub.html" title="Tebili <sub> kinachotengwa"><sub></a></li> <li><a href="/sw/tags/tag_summary.html" title="Tebili <summary> kinachotengwa"><summary></a></li> <li><a href="/sw/tags/tag_sup.html" title="Tebili <sup> kinachotengwa"><sup></a></li> <li><a href="/sw/tags/tag_svg.html" title="Tebili <svg> kinachotengwa"><svg></a></li> <li><a href="/sw/tags/tag_table.html" title="Tebili <table> kinachotengwa"><table></a></li> <li><a href="/sw/tags/tag_tbody.html" title="Tebili <tbody> kinachotengwa"><tbody></a></li> <li><a href="/sw/tags/tag_td.html" title="Tebili <td> kinachotengwa"><td></a></li> <li><a href="/sw/tags/tag_template.html" title="Tebili <template> kinachotengwa"><template></a></li> <li><a href="/sw/tags/tag_textarea.html" title="Tebili <textarea> kinachotengwa"><textarea></a></li> <li><a href="/sw/tags/tag_tfoot.html" title="Tebili <tfoot> kinachotengwa"><tfoot></a></li> <li><a href="/sw/tags/tag_th.html" title="Tebili <th> kinachotengwa"><th></a></li> <li><a href="/sw/tags/tag_thead.html" title="Tebili <thead> kinachotengwa"><thead></a></li> <li><a href="/sw/tags/tag_time.html" title="Tebili <time> kinachotengwa"><time></a></li> <li><a href="/sw/tags/tag_title.html" title="Tebili <title> kinachotengwa"><title></a></li> <li><a href="/sw/tags/tag_tr.html" title="Tebili <tr> kinachotengwa"><tr></a></li> <li><a href="/sw/tags/tag_track.html" title="Tebili <track> kinachotengwa"><track></a></li> <li><a href="/sw/tags/tag_tt.html" title="Tebili <tt> kinachotengwa"><tt></a></li> <li><a href="/sw/tags/tag_u.html" title="Tebili <u> kinachotengwa"><u></a></li> <li><a href="/sw/tags/tag_ul.html" title="Tebili <ul> kinachotengwa"><ul></a></li> <li><a href="/sw/tags/tag_var.html" title="Tebili <var> kinachotengwa"><var></a></li> <li><a href="/sw/tags/tag_video.html" title="Tebili <video> kinachotengwa"><video></a></li> <li><a href="/sw/tags/tag_wbr.html" title="Tebili <wbr> kinachotengwa"><wbr></a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/sw/howto/index.html" title="Kikuu cha CodeW3C.com">Kikuu cha 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 getImageData() 方法</h1> <div class="backtoreference"> <p><a href="/sw/tags/html_ref_canvas.html">Kitabu cha mifano cha Tebili <HTML5> Canvas</a></p> </div> <div> <h2>定义和用法</h2> <p><code>getImageData()</code> 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。</p> <p>对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：</p> <ul> <li>R - 红色 (0-255)</li> <li>G - 绿色 (0-255)</li> <li>B - 蓝色 (0-255)</li> <li>A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)</li> </ul> <p>color/alpha 以数组形式存在，并存储于 ImageData 对象的 <a href="/sw/tags/canvas_imagedata_data.html" title="Data ya canvas ya Tebili <canvas>">data</a> 属性中。</p> <p class="tip"><span>Tahadhari:</span>在操作完成数组中的 color/alpha 信息之后，您可以使用 <a href="/sw/tags/canvas_putimagedata.html" title="Method ya putImageData() ya canvas ya Tebili <canvas>">putImageData()</a> 方法将图像数据拷贝回画布上。</p> <h3>例子：</h3> <p>以下代码可获得被返回的 ImageData 对象中第一个像素的 color/alpha 信息：</p> <pre class="language-js"> red=imgData.data[0]; green=imgData.data[1]; blue=imgData.data[2]; alpha=imgData.data[3]; </pre> <p class="tiy"><a target="_blank" href="/sw/tiy/t.html?f=eg_html5_canvas_getimagedata_firstpx">Jifunze tena</a></p> <p class="tip"><span>Tahadhari:</span>您也可以使用 getImageData() 方法来反转画布上某个图像的每个像素的颜色。</p> <p>Tumia msingi huu kumtaarifu kila rangi kwenye mizuri ya kichwa cha kati kwa kumwambia thamani za rangi:</p> <pre class="language-js"> red=255-old_red; green=255-old_green; blue=255-old_blue; </pre> <p>（Tazama mifano ya ‘Mfano kwa michezo’ hapa chini。）</p> </div> <div> <h2>Mfano</h2> <h3>Mfano 1</h3> <p>Maktaba hizi ya chini inachukua data ya rangi ya kipengele cha kichwa cha kati kwenye eneo la kipengele cha kichwa cha kati kwa kutumia getImageData() na inapokaa kwenye kichwa cha kati cha picha kwa kutumia putImageData():</p> <pre class="language-js"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="red"; ctx.fillRect(10,10,50,50); function copy() } var <mark>imgData=ctx.getImageData(10,10,50,50)</mark>; ctx.putImageData(imgData,10,70); } </pre> <p class="tiy"><a target="_blank" href="/sw/tiy/t.html?f=eg_html5_canvas_getimagedata">Jifunze tena</a></p> <p class="tip"><span>Tahadhari:</span>Mafano mengi inapatikana kwenye mabaki ya ukurasa.</p> </div> <div> <h2>Inasikia</h2> <pre>var imgData=context.getImageData(<i>x</i>,<i>y</i>,<i>width</i>,<i>height</i>);</pre> <h3>Makusanyiko ya thamani</h3> <table class="dataintable"> <tr> <th style="width:25%;">Makusanyiko</th> <th>Kueleza</th> </tr> <tr> <td><i>x</i></td> <td>Kina cha yote cha eneo la kubadilika la kipengele cha kichwa cha kati kwa koordinate ya x.</td> </tr> <tr> <td><i>y</i></td> <td>Kina cha yote cha eneo la kubadilika la kipengele cha kichwa cha kati kwa koordinate ya y.</td> </tr> <tr> <td><i>width</i></td> <td>Ukubwa wa eneo la kubadilika la kipengele cha kichwa cha kati.</td> </tr> <tr> <td><i>height</i></td> <td>Ukubwa wa eneo la kubadilika la kipengele cha kichwa cha kati.</td> </tr> </table> </div> <div> <h2>Mafano mengi</h2> <h3>Mfano 2</h3> <p>Tumia picha:</p> <img src="/i/eg_tulip.jpg" id="tulip" alt="The Tulip" style="margin-left:10px;" /> <p>Tumia getImageData() kichukua rangi ya mizuri wa kila rangi kwenye picha ya kichwa cha kati.</p> <canvas id="myCanvas2" width="450" height="300" style="border:1px solid #d3d3d3;background:#ffffff; margin-top:15px;"> Mashambulizi wako hauzungumza HTML5 canvas tag. </canvas> <script> document.getElementById("tulip").onload=function(){ var c=document.getElementById("myCanvas2"); var canvOK=1; try {c.getContext("2d");} catch (er) {canvOK=0;} if (canvOK==1) { var ctx=c.getContext("2d"); var img=document.getElementById("tulip"); ctx.drawImage(img,10,10); var imgData=ctx.getImageData(0,0,c.width,c.height); for (i=0; i<imgData.width*imgData.height*4;i+=4) { imgData.data[i]=255-imgData.data[i]; imgData.data[i+1]=255-imgData.data[i+1]; imgData.data[i+2]=255-imgData.data[i+2]; imgData.data[i+3]=255; } ctx.putImageData(imgData,0,0); } }; </script> <p>JavaScript:</p> <pre class="language-js"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("tulip"); ctx.drawImage(img,0,0); var imgData=<mark>ctx.getImageData(0,0,c.width,c.height)</mark>; // kichukua rangi for (var i=0;i<imgData.data.length;i+=4) } imgData.data[i]=255-imgData.data[i]; imgData.data[i+1]=255-imgData.data[i+1]; imgData.data[i+2]=255-imgData.data[i+2]; imgData.data[i+3]=255; } ctx.putImageData(imgData,0,0); </pre> <p class="tiy"><a target="_blank" href="/sw/tiy/t.html?f=eg_html5_canvas_getimagedata_firstpx">Jifunze tena</a></p> </div> <div> <h2>Makampuni ya vyenginevu</h2> <p>Inafikia viwango vya vyenginevu vya kwanza ambavyo vinahakikisha uwanja huo.</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>Tahadhari:</span>Internet Explorer 8 na vyenginevu vya vifupi hawakubali elementi ya <canvas>.</p> </div> <div class="backtoreference"> <p><a href="/sw/tags/html_ref_canvas.html">Kitabu cha mifano cha Tebili <HTML5> Canvas</a></p> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div>  <div id="sidebar"> <div><h3><center> Kifaa cha kiongozi </center><h3> <h5 id="tools_reference"><a href="/sw/tags/index.html">Kitabu cha mifano cha Tebili <HTML></a></h5> <h5 id="tools_example"><a href="/sw/html/html_examples.html">Mifano ya Tebili <HTML></a></h5> <h5 id="tools_quiz"><a href="/sw/html/html_quiz.html">Mazoezi ya Tebili <HTML></a></h5> <h5 id="tools_tutorial"><a href="/sw/html/index.html">Mafunzo ya Tebili <HTML></a></h5> </div> <div><h3><center> Makampuni ya kusaidia </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> Matokeo ya CodeW3C.com inatokana na mafunzo na michezo, hatuwa hatarisha kweli ya matokeo. Risiko ambayo kinaingia na kutumia matokeo ya tovuti haukutengwa na tovuti. Haki za maukuu, hatarishati hizi. </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 cha CodeW3C.com">Msaada cha CodeW3C.com</a> <a href="/sw/about/about_use.html" title="Kuhusu kutumia">Sharti za kutumia</a> <a href="/sw/about/about_privacy.html" title="Kuhusu haki ya隐私">Sharti za haki ya隐私</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="Inaruka na Ce4e.com"></a> </p> </div> </div>  <script src="/myjs/tongji.js"></script> </body> </html>