HTML canvas data 属性

CodeW3C အွန်လိုင်း ပရိုဂရမ်

HTML စာကြိုး ပရိုဂရမ်
ဘတ်တာ ဗွီဒီယို
ဆက်သွယ်သူ ဗွီဒီယို
ပရိုဂရမ် ပရိုဂရမ်
XML စာကြိုး ပရိုဂရမ်
ဝိုင်းကျွန်း စာကြိုး
လုပ်သုံး စာကြိုး

ပြည့်ပြည့်စွာ အစီအစဉ်

လုပ်သုံး စာကြိုး

HTML အရာဝတ္တု (အက္ခရာ ရှိစဉ်)
HTML အရာဝတ္တု (ပုံစံ ရှိစဉ်)
HTML ဘတ်တာကွန်ပျူတာ ထောက်ခံ
HTML အမြဲအား
HTML အခမ်းအနား
HTML အရောင် အမည်
HTML လက်ရွေး
HTML ဗွီ/အော်ပရိုဒ်
HTML အကျဉ်း အရာ
HTML အခြေခံ အဘိဓာန
HTML URL အော်ပရိုက္ခရာ
HTML စကားရပ် ကုလား
HTML နိုင်ငံ ကုဒ်
HTTP အကြောင်းအရာ
HTTP စမ်းသပ်
ကျော့ခ် အော်ပရိုက္ခရာ

HTML လက်တင်

<!-->
<!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>
<map>
<mark>
<menu>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<search>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
</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 data 属性</h1> <div class="backtoreference"> <p><a href="/my/tags/html_ref_canvas.html">HTML5 Canvas 参考手册</a></p> </div> <div> <h2>定义和用法</h2> <p><code>data</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 对象的 <code>data</code> အခြေခံအရာများတွင်</p> <h3>အကျယ်တရား</h3> <p>ImageData အပိုင်းများတွင် ပထမပုံအချင်းကို အဖျားအရောင်ဖြင့် ပြင်ဆင်သော ဘာသာစကားဖြင့်</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>ImageData အပိုင်းများတွင် ဒုတိယပုံအချင်းကို အဖျားအရောင်ဖြင့် ပြင်ဆင်သော ဘာသာစကားဖြင့်</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> <p class="tip"><span>အကြောင်းအရာ</span>လေ့လာပါ။ <a href="/my/tags/canvas_createimagedata.html" title="HTML5 canvas createImageData() စက်တင်">createImageData()</a>、<a href="/my/tags/canvas_getimagedata.html" title="HTML5 canvas getImageData() စက်တင်">getImageData()</a> နှင့် <a href="/my/tags/canvas_putimagedata.html" title="HTML5 canvas putImageData() စက်တင်">putImageData()</a> ဘက်ကို သိရှိသည်အတွက် ပိုမိုကောင်းမွန်စွာ သုံးနိုင်သော နည်းလမ်းများ ကို တွေ့ဆုံပါ။</p> </div> <div> <h2>အမျိုး</h2> <p>100*100 ပုံအချင်းသော ImageData အပိုင်းကို ဖန်တီးသော ပုံအချင်းမျိုးမျိုးသော ပုံအချင်းများအတွက် အသုံးပြုပါ။</p> <canvas id="myCanvas" class="canvas_example"> ကျော်ကြော်သည်က ကြီးကြီးသောက်ကန်း ချင်သော အခြေခံအရာကို မမှောက်ရသည်။ </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]=255; imgData.data[i+1]=0; 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=ctx.createImageData(100,100); for (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="/my/tiy/t.html?f=eg_html5_canvas_createimagedata">亲自试一试</a></p> </div> <div> <h2>语法</h2> <pre>imageData.data;</pre> </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>