कैनवस globalCompositeOperation गुण

Canvas संदर्भ दस्तावेज

परिभाषा और उपयोग

globalCompositeOperation गुण सेटिंग या वापसी करती है कि कैसे एक स्रोत (नया) इमेज को लक्ष्य (होने वाला) इमेज पर चित्रित किया जाए

स्रोत इमेज = आपको कैनवस पर रखने वाली ड्राइंग

लक्ष्य इमेज = आपने कैनवस पर रखे हुए ड्राइंग

उदाहरण

उदाहरण 1

विभिन्न globalCompositeOperation मूल्यों के साथ वर्पित करें। लाल वर्पित को लक्ष्य इमेज कहा जाता है। नीला वर्पित को स्रोत इमेज कहा जाता है:

　　　　　source-over destination-over

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

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

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-atop लक्ष्य इमेज के ऊपर स्रोत इमेज दिखाएं। स्रोत इमेज के लक्ष्य इमेज के बाहर का हिस्सा अदृश्य है।
source-in लक्ष्य इमेज में स्रोत इमेज दिखाएं। केवल लक्ष्य इमेज के भीतर के स्रोत इमेज का हिस्सा दिखाया जाएगा। लक्ष्य इमेज पारदर्शी है।
source-out लक्ष्य इमेज के बाहर स्रोत इमेज दिखाएं। केवल लक्ष्य इमेज के बाहर के स्रोत इमेज का हिस्सा दिखाया जाएगा। लक्ष्य इमेज पारदर्शी है।
destination-over स्रोत इमेज के ऊपर लक्ष्य इमेज दिखाएं।
destination-atop स्रोत इमेज के ऊपर लक्ष्य इमेज दिखाएं। स्रोत इमेज के बाहर के लक्ष्य इमेज का हिस्सा दिखाया नहीं जाएगा।
destination-in स्रोत इमेज में लक्ष्य इमेज दिखाएं। केवल स्रोत इमेज के भीतर के लक्ष्य इमेज का हिस्सा दिखाया जाएगा। स्रोत इमेज पारदर्शी है।
destination-out स्रोत इमेज के बाहर लक्ष्य इमेज दिखाएं। केवल स्रोत इमेज के बाहर के लक्ष्य इमेज का हिस्सा दिखाया जाएगा। स्रोत इमेज पारदर्शी है।
लाइटर स्रोत इमेज + लक्ष्य इमेज दिखाएं।
कॉपी स्रोत इमेज दिखाएं। लक्ष्य इमेज को नज़रअंदाज करें।
xor स्रोत चित्र और लक्ष्य चित्र को अन्याय संचार से संयोजित करने के लिए अन्याय ऑपरेशन का उपयोग करें。

तकनीकी विस्तार

मूल वैल्यू: सोर्स-ओवर

ब्राउज़र समर्थन

तालिका में दिए गए नंबर इस गुण को पूरी तरह से समर्थन करने वाले पहले ब्राउज़र संस्करण को सूचित करते हैं。

च्रोम एज फायरफॉक्स सैफारी ऑपेरा
च्रोम एज फायरफॉक्स सैफारी ऑपेरा
4.0 9.0 3.6 4.0 10.1

टिप्पणी:Internet Explorer 8 और अधिक पुरानी संस्करण <canvas> एलीमेंट को समर्थन नहीं देते हैं。

Canvas संदर्भ दस्तावेज