Canvas အခွဲအတွက် အခွဲအတွက် အကိုင်းအချုပ်

Canvas အမှတ်အသားစာအုပ်

အသုံးပြုခြင်း နှင့် အပြုအမူ

data အကိုင်းအချုပ် ကို ကုန်အမှတ် တစ်ခု ပြန်လည်ပေးသည်။ အရာများသည် အမှတ်အသားအရ သတ်မှတ်ထားသော ImageData အားကစား ပုံအခွဲအတွက် ပုံအခွဲ အခွဲကို ပါဝင်သည်။

ImageData အားကစား ပေါ်တွင် ရှိသော ခွဲထုတ်သည်များတွင် အသုံးပြုသော သတင်းများ သည် လေး စက္ခု ဖြစ်သည်။ ဖြစ်ပါသည််အားဖြင့် RGBA အားလုံးပါဝင်သည်။

  • R - အပြာ (0-255)
  • G - အဖျား (0-255)
  • B - အကြီး (0-255)
  • A - alpha ခွဲ (0-255; 0 သည် အလွန် ပြတ်တောက်သည်၊ 255 သည် အပြည့်အဝင် ဖြစ်သည်)

color/alpha အဖွဲ့အစည်း အပြင်းအထား သည် ပုံကွန်ပျူတာအဖွဲ့အစည်း အဖွဲ့အစည်း တွင် ဖြင့် ထိန်းသိမ်းထားပါသည်。 data အချက်အလက်

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

ပုံကွန်ပျူတာအဖွဲ့အစည်း အရောက်အရောင် ပြောင်းလဲသည့် အက္ခရာကို ပြထားသည်。

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;

အကြိမ်ဖြူးကျမ်းကတ္တား createImageData()、getImageData() နှင့် putImageData() ဘရပ်သားကွန်ပျူတာအဖွဲ့အစည်း အကြောင်းကြား နှင့် ပိုမိုသိရှိရန် နည်းလမ်းများ ကို တွေ့ဆုံပါ

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

100*100 ပုံအချင်း ပုံကွန်ပျူတာအဖွဲ့အစည်း ကို ဖန်တီးပြီး ရောင်ချယ်မှု အား အနည်းငယ် သုံးစွဲသည့် ပုံကွန်ပျူတာအဖွဲ့အစည်း ကို ဖန်တီးပါ။

သင့် ဘရပ်သားကွန်ပျူတာ အကျွမ်းကျွမ်းသော ကွန်ပျူတာချို့ မပေးဘဲရှိပါ။

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

ကိုယ်တိုင် ကြိုးစားလေ့ကျင့်ပါ

အက္ခရာ

imageData.data;

ဘရပ်သားကွန်ပျူတာ ကူညီပေးခြင်း

အချက်အလက်များကို ထိုအခြေအနေကို လုံလောက်စွာ ကူညီပေးသော ဘရပ်သားကွန်ပျူတာများ ပြောင်းလဲသည့်ပုံစံကို ပြထားသည်。

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

စကားလုံးInternet Explorer 8 နှင့် အရေးပါ သော အချိန် ကုန်ကျသော ပုံစံများ မပါ။

Canvas အမှတ်အသားစာအုပ်