HTML कैनवस globalCompositeOperation गुण
विभाषण और उपयोग
globalCompositeOperation गुण सेट करना या वापस करना कैसे एक स्रोत (नया) इमेज को लक्ष्य (हाल ही) इमेज पर चित्रित किया जाए।
स्रोत इमेज = आप कैनवस पर रखने वाला ड्राइंग है।
लक्ष्य इमेज = आपने कैनवस पर रखा हुआ ड्राइंग है।
उदाहरण
उदाहरण 1
विभिन्न globalCompositeOperation मूल्यों के साथ चतुर्भुज आकृति बनाएं. लाल चतुर्भुज लक्ष्य इमेज है। नीला चतुर्भुज स्रोत इमेज है:
source-over destination-over
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50);
उदाहरण 2
सभी globalCompositeOperation गुण मूल्य:
व्याकरण
context.globalCompositeOperation="source-in";
गुण मूल्य
| मूल्य | वर्णन |
|---|---|
| source-over | डिफ़ॉल्ट. लक्ष्य इमेज पर स्रोत इमेज दिखाएं。 |
| source-atop | लक्ष्य इमेज के ऊपर स्रोत इमेज दिखाएं. स्रोत इमेज का लक्ष्य इमेज के बाहर का हिस्सा दिखाया नहीं जाएगा。 |
| source-in | लक्ष्य इमेज में स्रोत इमेज दिखाएं. केवल लक्ष्य इमेज के भीतर स्रोत इमेज का हिस्सा दिखाया जाएगा, लक्ष्य इमेज पारदर्शी है। |
| source-out | लक्ष्य इमेज के बाहर स्रोत इमेज दिखाएं. केवल लक्ष्य इमेज के बाहर स्रोत इमेज का हिस्सा दिखाया जाएगा, लक्ष्य इमेज पारदर्शी है। |
| destination-over | स्रोत इमेज के ऊपर लक्ष्य इमेज दिखाएं。 |
| destination-atop | स्रोत इमेज के ऊपर लक्ष्य इमेज दिखाएं। स्रोत इमेज के बाहर के लक्ष्य इमेज का हिस्सा नहीं दिखाया जाएगा。 |
| destination-in | स्रोत इमेज में लक्ष्य इमेज दिखाएं। केवल स्रोत इमेज के भीतर के लक्ष्य इमेज का हिस्सा दिखाया जाएगा, स्रोत इमेज पारदर्शी है। |
| destination-out | स्रोत इमेज के बाहर लक्ष्य इमेज दिखाएं। केवल स्रोत इमेज के बाहर के लक्ष्य इमेज का हिस्सा दिखाया जाएगा, स्रोत इमेज पारदर्शी है। |
| lighter | स्रोत इमेज + लक्ष्य इमेज दिखाएं。 |
| copy | स्रोत इमेज दिखाएं। लक्ष्य इमेज को नज़रअंदाज़ करें。 |
| xor | स्रोत इमेज और लक्ष्य इमेज को ऑक्सड़ ऑपरेशन के द्वारा संयोजित करने के लिए उपयोग करें। |
तकनीकी विवरण
| मूल वलय: | source-over |
|---|
ब्राउज़र समर्थन
तालिका में दिए गए नंबर इस गुण को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र के संस्करण को सूचित करते हैं。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
टिप्पणी：Internet Explorer 8 और अधिक पुरानी संस्करण <canvas> एलीमेंट को समर्थन नहीं देते हैं。
