एचटीएमएल कैनवास ग्लोबलकंपोजिटऑपरेशन प्रॉपर्टी
उदाहरण
दो अलग-अलग वैश्विक कॉम्पोजिटऑपरेशन मानों का उपयोग करके आयत बनाएं। लाल आयत गंतव्य चित्र हैं । नीले आयत स्रोत चित्र हैं :
स्रोत-ओवर
गंतव्य-ओवर
जावास्क्रिप्ट:
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);
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
Property | |||||
---|---|---|---|---|---|
globalCompositeOperation | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
परिभाषा और उपयोग
GlobalCompositeOperation गुण सेट करता है या लौटाता है कि एक गंतव्य (मौजूदा) छवि पर एक स्रोत (नई) छवि कैसे खींची जाती है।
स्रोत छवि = चित्र जो आप कैनवास पर रखने वाले हैं।
गंतव्य छवि = चित्र जो पहले से ही कैनवास पर रखे गए हैं।
डिफ़ॉल्ट मान: | स्रोत-ओवर |
---|---|
जावास्क्रिप्ट सिंटैक्स: | संदर्भ .globalCompositeOperation = "सोर्स-इन"; |
सम्पत्ति की कीमत
Value | Description | Play it |
---|---|---|
source-over | Default. Displays the source image over the destination image | |
source-atop | Displays the source image on top of the destination image. The part of the source image that is outside the destination image is not shown | |
source-in | Displays the source image in to the destination image. Only the part of the source image that is INSIDE the destination image is shown, and the destination image is transparent | |
source-out | Displays the source image out of the destination image. Only the part of the source image that is OUTSIDE the destination image is shown, and the destination image is transparent | |
destination-over | Displays the destination image over the source image | |
destination-atop | Displays the destination image on top of the source image. The part of the destination image that is outside the source image is not shown | |
destination-in | Displays the destination image in to the source image. Only the part of the destination image that is INSIDE the source image is shown, and the source image is transparent | |
destination-out | Displays the destination image out of the source image. Only the part of the destination image that is OUTSIDE the source image is shown, and the source image is transparent | |
lighter | Displays the source image + the destination image | |
copy | Displays the source image. The destination image is ignored | |
xor | The source image is combined by using an exclusive OR with the destination image |
उदाहरण
सभी GlobalCompositeOperation गुण मान: