HTML कैनवस डेटा गुण

HTML5 कैनवस संदर्भ दस्तावेज

विन्यास और उपयोग

data गुण एक ऑब्जैक्ट वापस देता है जो निर्दिष्ट ImageData ऑब्जैक्ट के इमेज डेटा को शामिल करता है.

ImageData ऑब्जैक्ट के प्रत्येक पिक्सल के लिए चार पहलू की जानकारी होती है, अर्थात RGBA मूल्य:

  • R - लाल (0-255)
  • G - हरा (0-255)
  • B - नीला (0-255)
  • A - alpha चैनल (0-255; 0 हल्का है, 255 पूरी तरह से दृश्यमान है)

color/alpha एक आयत्ताकार में मौजूद है और ImageData ऑब्जैक्ट के data गुणों में.

उदाहरण:

ImageData ऑब्जैक्ट के पहले पिक्सल को लाल बनाने के लिए वाक्यबद्ध:

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

ImageData ऑब्जैक्ट के दूसरे पिक्सल को हरा बनाने के लिए वाक्यबद्ध:

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

सूचना:देखें createImageData()、getImageData() और putImageData() विधि, ImageData ऑब्जैक्ट के बारे में अधिक जानने के लिए.

उदाहरण

100*100 पिक्सल के ImageData ऑब्जैक्ट को बनाएं जहां प्रत्येक पिक्सल लाल होगा:：

आपका ब्राउज़र कैनवस टैग को समर्थित नहीं करता.

जावास्क्रिप्ट:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (वार 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> एलीमेंट का समर्थन नहीं करते हैं。

HTML5 कैनवस संदर्भ दस्तावेज