HTML canvas createImageData() 方法

Jadili ya Kina

参考手册

HTML Taarifu

-

</a></li> <li><a href="/sw/tags/tag_img.html" title="HTML <img> taji"><img></a></li> <li><a href="/sw/tags/tag_input.html" title="HTML <input> taji"><input></a></li> <li><a href="/sw/tags/tag_ins.html" title="HTML <ins> taji"><ins></a></li> <li><a href="/sw/tags/tag_kbd.html" title="HTML <kbd> taji"><kbd></a></li> <li><a href="/sw/tags/tag_label.html" title="HTML <label> taji"><label></a></li> <li><a href="/sw/tags/tag_legend.html" title="HTML <legend> taji"><legend></a></li> <li><a href="/sw/tags/tag_li.html" title="HTML <li> taji"><li></a></li> <li><a href="/sw/tags/tag_link.html" title="HTML <link> taji"><link></a></li> <li><a href="/sw/tags/tag_main.html" title="HTML <main> taji"><main></a></li> <li><a href="/sw/tags/tag_map.html" title="HTML <map> taji"><map></a></li> <li><a href="/sw/tags/tag_mark.html" title="HTML <mark> taji"><mark></a></li> <li><a href="/sw/tags/tag_menu.html" title="HTML <menu> taji"><menu></a></li> <li><a href="/sw/tags/tag_meta.html" title="HTML <meta> taji"><meta></a></li> <li><a href="/sw/tags/tag_meter.html" title="HTML <meter> taji"><meter></a></li> <li><a href="/sw/tags/tag_nav.html" title="HTML <nav> taji"><nav></a></li> <li><a href="/sw/tags/tag_noframes.html" title="HTML <noframes> taji"><noframes></a></li> <li><a href="/sw/tags/tag_noscript.html" title="HTML <noscript> taji"><noscript></a></li> <li><a href="/sw/tags/tag_object.html" title="HTML <object> taji"><object></a></li> <li><a href="/sw/tags/tag_ol.html" title="HTML <ol> taji"><ol></a></li> <li><a href="/sw/tags/tag_optgroup.html" title="HTML <optgroup> taji"><optgroup></a></li> <li><a href="/sw/tags/tag_option.html" title="HTML <option> taji"><option></a></li> <li><a href="/sw/tags/tag_output.html" title="HTML <output> taji"><output></a></li> <li><a href="/sw/tags/tag_p.html" title="HTML <p> taji"><p></a></li> <li><a href="/sw/tags/tag_param.html" title="HTML <param> taji"><param></a></li> <li><a href="/sw/tags/tag_picture.html" title="HTML <picture> taji"><picture></a></li> <li><a href="/sw/tags/tag_pre.html" title="HTML <pre> taji"><pre></a></li> <li><a href="/sw/tags/tag_progress.html" title="HTML <progress> taji"><progress></a></li> <li><a href="/sw/tags/tag_q.html" title="HTML <q> taji"><q></a></li> <li><a href="/sw/tags/tag_rp.html" title="HTML <rp> taji"><rp></a></li> <li><a href="/sw/tags/tag_rt.html" title="HTML <rt> taji"><rt></a></li> <li><a href="/sw/tags/tag_ruby.html" title="HTML <ruby> taji"><ruby></a></li> <li><a href="/sw/tags/tag_s.html" title="HTML <s> taji"><s></a></li> <li><a href="/sw/tags/tag_samp.html" title="HTML <samp> taji"><samp></a></li> <li><a href="/sw/tags/tag_script.html" title="HTML <script> taji"><script></a></li> <li><a href="/sw/tags/tag_search.html" title="HTML <search> taji"><search></a></li> <li><a href="/sw/tags/tag_section.html" title="HTML <section> taji"><section></a></li> <li><a href="/sw/tags/tag_select.html" title="HTML <select> taji"><select></a></li> <li><a href="/sw/tags/tag_small.html" title="HTML <small> taji"><small></a></li> <li><a href="/sw/tags/tag_source.html" title="HTML <source> taji"><source></a></li> <li><a href="/sw/tags/tag_span.html" title="HTML <span> taji"><span></a></li> <li><a href="/sw/tags/tag_strike.html" title="HTML <strike> taji"><strike></a></li> <li><a href="/sw/tags/tag_strong.html" title="HTML <strong> taji"><strong></a></li> <li><a href="/sw/tags/tag_style.html" title="HTML <style> taji"><style></a></li> <li><a href="/sw/tags/tag_sub.html" title="Tebili <sub> kifupi"><sub></a></li> <li><a href="/sw/tags/tag_summary.html" title="Tebili <summary> kifupi"><summary></a></li> <li><a href="/sw/tags/tag_sup.html" title="Tebili <sup> kifupi"><sup></a></li> <li><a href="/sw/tags/tag_svg.html" title="Tebili <svg> kifupi"><svg></a></li> <li><a href="/sw/tags/tag_table.html" title="Tebili <table> kifupi"><table></a></li> <li><a href="/sw/tags/tag_tbody.html" title="Tebili <tbody> kifupi"><tbody></a></li> <li><a href="/sw/tags/tag_td.html" title="Tebili <td> kifupi"><td></a></li> <li><a href="/sw/tags/tag_template.html" title="Tebili <template> kifupi"><template></a></li> <li><a href="/sw/tags/tag_textarea.html" title="Tebili <textarea> kifupi"><textarea></a></li> <li><a href="/sw/tags/tag_tfoot.html" title="Tebili <tfoot> kifupi"><tfoot></a></li> <li><a href="/sw/tags/tag_th.html" title="Tebili <th> kifupi"><th></a></li> <li><a href="/sw/tags/tag_thead.html" title="Tebili <thead> kifupi"><thead></a></li> <li><a href="/sw/tags/tag_time.html" title="Tebili <time> kifupi"><time></a></li> <li><a href="/sw/tags/tag_title.html" title="Tebili <title> kifupi"><title></a></li> <li><a href="/sw/tags/tag_tr.html" title="Tebili <tr> kifupi"><tr></a></li> <li><a href="/sw/tags/tag_track.html" title="Tebili <track> kifupi"><track></a></li> <li><a href="/sw/tags/tag_tt.html" title="Tebili <tt> kifupi"><tt></a></li> <li><a href="/sw/tags/tag_u.html" title="Tebili <u> kifupi"><u></a></li> <li><a href="/sw/tags/tag_ul.html" title="Tebili <ul> kifupi"><ul></a></li> <li><a href="/sw/tags/tag_var.html" title="Tebili <var> kifupi"><var></a></li> <li><a href="/sw/tags/tag_video.html" title="Tebili <video> kifupi"><video></a></li> <li><a href="/sw/tags/tag_wbr.html" title="Tebili <wbr> kifupi"><wbr></a></li> </ul> </div> <div><h3><center> 选修课 </center><h3> <h2>课程推荐：</h2> <ul> <li><a href="/sw/howto/index.html" title="Kisasa ya CodeW3C.com">Kisasa ya 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 createImageData() 方法</h1> <div class="backtoreference"> <p><a href="/sw/tags/html_ref_canvas.html">Makala ya kirefu ya Tebili5 Canvas</a></p> </div> <div> <h2>定义和用法</h2> <p><code>createImageData()</code> 方法创建新的空白 ImageData 对象。新对象的默认像素值 transparent black。</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>Kwa hivyo, kichwa mweupe kina uhusiano wa (0,0,0,0).</p> <p>color/alpha inapatikana kama orodha, na kwa sababu orodha ina taarifa ya kila mkuu wa miamba kwa uwezo wa kifaraghalika, ukubwa wa orodha ni kwa uwezo wa kifaraghalika wa ImageData kwa kumekadiri (kutafuta ukubwa wa orodha kina nafasi zaidi, ni nafasi ya kutumia ImageDataObject.data.length)</p> <p>Orodha ya taarifa za rangi/alpha inahusishwa kwenye ImageData kwa sababu ya <a href="/sw/tags/canvas_imagedata_data.html" title="Mwili wa canvas ya Tebili data">data</a> kabla ya.</p> <p class="tip"><span>Maelezo:</span>Baada ya kumaliza kusaidia taarifa za rangi/alpha katika orodha, unaweza kutumia <a href="/sw/tags/canvas_putimagedata.html" title="Mwihoko wa canvas ya Tebili putImageData() method">putImageData()</a> Methodu ina kopiwa data ya picha kwa kichwa cha kizuri.</p> <h3>Mfano:</h3> <p>Muundo huu unazisha mkuu wa kwanza wa ImageData kwa kichwa mweupe:</p> <pre class="language-js"> imgData=ctx.createImageData(100,100); imgData.data[0]=255; imgData.data[1]=0; imgData.data[2]=0; imgData.data[3]=255; </pre> <p>Muundo huu unazisha mkuu wa pili wa ImageData kwa kichwa mweupe:</p> <pre class="language-js"> imgData=ctx.createImageData(100,100); imgData.data[4]=0; imgData.data[5]=255; imgData.data[6]=0; imgData.data[7]=255; </pre> </div> <div> <h2>Mfano</h2> <p>Kumwita kwa 100*100 mkono wa ImageData, kwa sababu kila mkuu ni kichwa mweupe, na kumaliza kwa kichwa cha kizuri:</p> <canvas id="myCanvas" class="canvas_example"> Mfumo wako hauzungumza kifaa kichwa cha HTML5. </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"); var imgData=ctx.createImageData(100,100); for (var i=0;i<imgData.width*imgData.height*4;i+=4) { imgData.data[i+0]=0; imgData.data[i+1]=255; imgData.data[i+2]=0; imgData.data[i+3]=255; } ctx.putImageData(imgData,10,10); } </script> <p>JavaScript:</p> <pre class="language-js"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var imgData=<mark>ctx.createImageData(100,100)</mark>; kwa (var i=0;i<imgData.data.length;i+=4) { imgData.data[i+0]=255; imgData.data[i+1]=0; imgData.data[i+2]=0; imgData.data[i+3]=255; } ctx.putImageData(imgData,10,10); </pre> <p class="tiy"><a target="_blank" href="/sw/tiy/t.html?f=eg_html5_canvas_createimagedata">Tazama tena kwa matokeo</a></p> </div> <div> <h2>Muundo</h2> <p>Kuna msahau ya createImageData() yenye mbili:</p> <p>1. 以指定的尺寸（以像素计）创建新的 ImageData 对象：</p> <pre>var imgData=context.createImageData(<i>width</i>,<i>height</i>);</pre> <p>2. 创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象（不会复制图像数据）：</p> <pre>var imgData=context.createImageData(<i>imageData</i>);</pre> <h3>参数值</h3> <table class="dataintable"> <tr> <th style="width:25%;">参数</th> <th>描述</th> </tr> <tr> <td><i>width</i></td> <td>ImageData 对象的宽度，以像素计。</td> </tr> <tr> <td><i>height</i></td> <td>ImageData 对象的高度，以像素计。</td> </tr> <tr> <td><i>imageData</i></td> <td>另一个 ImageData 对象。</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>Mafupi:</span>Internet Explorer 8 na vyenginevu vya wakati huo hawakubali kifupi <canvas>.</p> </div> <div class="backtoreference"> <p><a href="/sw/tags/html_ref_canvas.html">Makala ya kirefu ya Tebili5 Canvas</a></p> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div>  <div id="sidebar"> <div><h3><center> Kifaa cha kufaa </center><h3> <h5 id="tools_reference"><a href="/sw/tags/index.html">Makala ya kirefu ya Tebili</a></h5> <h5 id="tools_example"><a href="/sw/html/html_examples.html">Mifano ya Tebili</a></h5> <h5 id="tools_quiz"><a href="/sw/html/html_quiz.html">Mfukuo wa Tebili</a></h5> <h5 id="tools_tutorial"><a href="/sw/html/index.html">Mafunzo ya Tebili</a></h5> </div> <div><h3><center> Vituo vya msingi </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> Kisasa ya CodeW3C.com inatokana na michezo ya kufungua na kufikia, hatukubali kweli wa mawasiliano. Risiko ambalo linaingia kwa kutumia zawadi za tovuti haukuchukuliwa na tovuti. Haki za mabaki, hata hivyo. </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 wa CodeW3C.com">Msaada wa 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 hufaa">Sharti za hufaa</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="Inarafiki Ce4e.com"></a> </p> </div> </div>  <script src="/myjs/tongji.js"></script> </body> </html>