Canvas डेटा रूपरेखा
विन्यास और उपयोग
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 (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 |
टिप्पणी:इंटरनेट एक्सप्लोरर 8 और अधिक पुरानी संस्करण <canvas> एलीमेंट का समर्थन नहीं करते
