HTML canvas createImageData() စနစ်

HTML5 Canvas 参考手册

ဒါ နှင့် အသုံးပြုခြင်း

createImageData() တောက်လုပ် အသစ် အိုင်ဒီဒိုင်ထား အားျမ်း အားဖြင့် တောက်လုပ်သည်။ အသစ် အိုင်ဒီဒိုင်ထား အတွက် ပုံစံ ပမာဏ သည် ပြင်းထန်သော ဂါလို

ImageData အားျမ်း ရှိ ချင်း များ အတွက် ရှိ သည် နှစ် ခု အကြောင်း ကြည့်ရှုရန် အကျိုး ကြောင်း ဖြစ်သည် RGBA အတိုင်း

  • R - ကလက် (0-255)
  • G - ဂယ် (0-255)
  • B - ဂရက် (0-255)
  • A - အရောင်သတ်မှတ်သည် (0-255; 0 ဟာ ပြင်းထန်ခြင်း သို့မဟုတ် 255 ဟာ ပြင်းထန်ခြင်း)

因此 ，transparent black 表示 (0,0,0,0)。

color/alpha 以数组形式存在，并且既然数组包含了每个像素的四条信息，数组的大小是 ImageData 对象的四倍。（获得数组大小有更简单的办法，就是使用 ImageDataObject.data.length）

color/alpha အချက်အလက် ကို ယူဆောင် သည့် အစား အရောက် သို့ ထိထွေး ပါ data အချက်အလက် အရေးပါ

အကြိမ်ကြိမ်color/alpha အချက်အလက် ကို လုပ်ဆောင် ပြီး ပြီးပြီးဆုံး ပြုလုပ် ပြီးနောက် သင် အသုံးပြု ကို putImageData() ပုံ အချက်အလက် ကို လက်မှတ်တိုက် ပေးပါ

အကြောင်းကြား

ဤ လိုင်းစက် က အင်တာများ အစား ပထမ ပုံ ကို အထူး အရောင် ဖြစ်သည့် အထိ ပြောင်းလဲပါ

imgData=ctx.createImageData(100,100);
imgData.data[0]=255;
imgData.data[1]=0;
imgData.data[2]=0;
imgData.data[3]=255;

ဤ လိုင်းစက် က အင်တာများ အစား ဒုတိယ ပုံ ကို အထူး အရောင် ဖြစ်သည့် အထိ ပြောင်းလဲပါ

imgData=ctx.createImageData(100,100);
imgData.data[4]=0;
imgData.data[5]=255;
imgData.data[6]=0;
imgData.data[7]=255;

အကြောင်းကြား

100*100 ပုံ အင်တာများ ကို ဖန်တီး ပြီး တစ် ပုံ လုံး အထူး အရောင် ဖြစ်သည့် ကြောင်း ပေးပြီး လက်မှတ်တိုက် ပေးပါ:

သင်၏ ဘရောက်သုတ် က အီလက်ထရောနစ်5 ကြောင်း ကို ထောက်ပံ့ခြင်း မ မရှိပါ

JavaScript:

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);

ကိုယ်တိုင် ကြိုးစား ကြည့်ပါ

လိုင်းစက်

createImageData() စက် နှစ် ပုံ ရှိသည်:

1. 以指定的尺寸（以像素计）创建新的 ImageData 对象：

var imgData=context.createImageData(width,height);

2. 创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象（不会复制图像数据）：

var imgData=context.createImageData(imageData);

参数值

参数 描述
width ImageData 对象的宽度，以像素计。
height ImageData 对象的高度，以像素计。
imageData 另一个 ImageData 对象。

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

注释：Internet Explorer 8 以及更早的版本不支持 元素。

HTML5 Canvas 参考手册