HTML कैनवास छविडेटा डेटा गुण
उदाहरण
एक 100*100 पिक्सेल इमेजडाटा ऑब्जेक्ट बनाएँ जहाँ हर पिक्सेल लाल रंग में सेट हो:
कैनवास
जावास्क्रिप्ट:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var imgData = ctx.createImageData(100, 100);
var i;
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);
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
| Property | |||||
|---|---|---|---|---|---|
| data | Yes | 9.0 | Yes | Yes | Yes |
परिभाषा और उपयोग
डेटा गुण एक ऑब्जेक्ट देता है जिसमें निर्दिष्ट ImageData ऑब्जेक्ट का छवि डेटा होता है।
ImageData ऑब्जेक्ट में प्रत्येक पिक्सेल के लिए सूचना के चार टुकड़े होते हैं, RGBA मान:
आर - रंग लाल (0-255 से)
जी - हरा रंग (0-255 से)
बी - रंग नीला (0-255 से)
ए - अल्फा चैनल (0-255 से; 0 पारदर्शी है और 255 है पूरी तरह से दृश्यमान)
रंग/अल्फा जानकारी एक सरणी में रखी जाती है, और ImageData ऑब्जेक्ट की डेटा प्रॉपर्टी में संग्रहीत होती है।
उदाहरण:
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;
युक्ति: ImageData ऑब्जेक्ट के बारे में अधिक जानने के लिए createImageData() , getImageData() , और putImageData() देखें।
जावास्क्रिप्ट सिंटैक्स
| जावास्क्रिप्ट सिंटैक्स: | छवि डेटा। डेटा; |
|---|
❮ HTML कैनवास संदर्भ