HTML canvas data বৈশিষ্ট্য

HTML5 ক্যানভাস রেফারেন্স ম্যানুয়েল

বিবরণ ও ব্যবহার

data বৈশিষ্ট্য একটি অবজেক্ট ফিরিয়ে দেয়, যেটি নির্দিষ্ট ImageData অবজেক্টের চিত্র তথ্য ধারণ করে。

ImageData অবজেক্টের প্রত্যেক পিক্সেলের জন্য, চারটি তথ্য রয়েছে, যেগুলোকে RGBA মান বলা হয়:

  • R - লাল (0-255)
  • G - সবুজ (0-255)
  • B - নীল (0-255)
  • A - alpha চ্যানেল (0-255; 0 হল স্বচ্ছ, 255 হল সম্পূর্ণ দৃশ্যমান)

color/alpha একটি আইনগত বর্ণমালা হিসাবে রয়েছে এবং ImageData অবজেক্টের 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 পিক্সেলের ImageData অবজেক্ট সৃষ্টি করুন যেখানে প্রত্যেক পিক্সেল লাল হয়েছে: :

আপনার ব্রাউজার ক্যানভাস ট্যাগটির সমর্থন করে না。

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;

ব্রাউজার সমর্থন

সারণীতে নম্বরগুলি এই বৈশিষ্ট্যটি পূর্ণাত্মকভাবে সমর্থনকারী প্রথম ব্রাউজার সংস্করণটি উল্লেখ করে

চ্রোম এডজ ফায়ারফক্স স্যাফারি ওপেরা
চ্রোম এডজ ফায়ারফক্স স্যাফারি ওপেরা
4.0 9.0 3.6 4.0 10.1

মন্তব্য:ইন্টারনেট এক্সপ্লোরার ৮ এবং তার পূর্ববর্তী সংস্করণগুলি <canvas> ইলেকট্রনম

HTML5 ক্যানভাস রেফারেন্স ম্যানুয়েল