खोज…
"गंतव्य-ओवर" के साथ मौजूदा आकृतियों के पीछे आकर्षित करें
context.globalCompositeOperation = "destination-over"
"डेस्टिनेशन-ओवर" मौजूदा ड्रॉइंग के तहत नए ड्राइंग को जगह देता है ।
context.drawImage(rainy,0,0);
context.globalCompositeOperation='destination-over'; // sunny UNDER rainy
context.drawImage(sunny,0,0);
"गंतव्य-बाहर" के साथ मौजूदा आकृतियों को मिटाएं
context.globalCompositeOperation = "destination-out"
"गंतव्य-बाहर" कंपोज़िटिंग मौजूदा आकृतियों को मिटाने के लिए नए आकार का उपयोग करता है।
नया आकार वास्तव में खींचा नहीं गया है - इसका उपयोग मौजूदा पिक्सेल को मिटाने के लिए "कुकी-कटर" के रूप में किया जाता है।
context.drawImage(apple,0,0);
context.globalCompositeOperation = 'destination-out'; // bitemark erases
context.drawImage(bitemark,100,40);
डिफ़ॉल्ट कंपोज़िंग: नई आकृतियाँ मौजूदा आकृतियों के ऊपर खींची गई हैं
context.globalCompositeOperation = "source-over"
"स्रोत-ओवर" कंपोज़िटिंग [डिफ़ॉल्ट] , किसी भी मौजूदा ड्रॉइंग पर सभी नए चित्र बनाता है।
context.globalCompositeOperation='source-over'; // the default
context.drawImage(background,0,0);
context.drawImage(parachuter,0,0);
"गंतव्य-इन" के साथ आकृतियों के अंदर क्लिप छवियां
context.globalCompositeOperation = "destination-in"
"गंतव्य में" एक नए आकार के अंदर मौजूदा चित्र क्लिप क्लिप।
नोट: मौजूदा ड्राइंग का कोई भी हिस्सा जो नए ड्राइंग के बाहर आता है, उसे मिटा दिया जाता है।
context.drawImage(picture,0,0);
context.globalCompositeOperation='destination-in'; // picture clipped inside oval
context.drawImage(oval,0,0);
"स्रोत-इन" के साथ आकृतियों के अंदर क्लिप छवियां
context.globalCompositeOperation = "source-in";
source-in एक मौजूदा आकृति के अंदर क्लिप नया चित्र संयोजन।
नोट: मौजूदा ड्राइंग के बाहर आने वाले नए ड्राइंग का कोई भी हिस्सा मिटा दिया गया है।
context.drawImage(oval,0,0);
context.globalCompositeOperation='source-in'; // picture clipped inside oval
context.drawImage(picture,0,0);
"स्रोत-परमाणु" के साथ आंतरिक छाया
context.globalCompositeOperation = 'source-atop'
source-atop कंपोज़िटिंग एक मौजूदा आकार के अंदर नई छवि को क्लिप करता है।
// gold filled rect
ctx.fillStyle='gold';
ctx.fillRect(100,100,100,75);
// shadow
ctx.shadowColor='black';
ctx.shadowBlur=10;
// restrict new draw to cover existing pixels
ctx.globalCompositeOperation='source-atop';
// shadowed stroke
// "source-atop" clips off the undesired outer shadow
ctx.strokeRect(100,100,100,75);
ctx.strokeRect(100,100,100,75);
"अंतर" के साथ इनवर्ट या नेगेट छवि
समग्र ऑपरेशन के साथ एक छवि पर एक सफेद आयत रेंडर करें
ctx.globalCompositeOperation = 'difference';
अल्फा सेटिंग के साथ प्रभाव की मात्रा को नियंत्रित किया जा सकता है
// Render the image
ctx.globalCompositeOperation='source-atop';
ctx.drawImage(image, 0, 0);
// set the composite operation
ctx.globalCompositeOperation='difference';
ctx.fillStyle = "white";
ctx.globalAlpha = alpha; // alpha 0 = no effect 1 = full effect
ctx.fillRect(0, 0, image.width, image.height);
"रंग" के साथ काले और सफेद
के माध्यम से एक छवि से रंग निकालें
ctx.globalCompositeOperation = 'color';
अल्फा सेटिंग के साथ प्रभाव की मात्रा को नियंत्रित किया जा सकता है
// Render the image
ctx.globalCompositeOperation='source-atop';
ctx.drawImage(image, 0, 0);
// set the composite operation
ctx.globalCompositeOperation='color';
ctx.fillStyle = "white";
ctx.globalAlpha = alpha; // alpha 0 = no effect 1 = full effect
ctx.fillRect(0, 0, image.width, image.height);
"संतृप्ति" के साथ रंग विपरीत बढ़ाएँ
के साथ एक छवि का संतृप्ति स्तर बढ़ाएँ
ctx.globalCompositeOperation = 'saturation';
प्रभाव की मात्रा को अल्फा सेटिंग या फिल ओवरले में संतृप्ति की मात्रा के साथ नियंत्रित किया जा सकता है
// Render the image
ctx.globalCompositeOperation='source-atop';
ctx.drawImage(image, 0, 0);
// set the composite operation
ctx.globalCompositeOperation ='saturation';
ctx.fillStyle = "red";
ctx.globalAlpha = alpha; // alpha 0 = no effect 1 = full effect
ctx.fillRect(0, 0, image.width, image.height);
"चमकदार" के साथ सीपिया एफएक्स
के साथ एक रंगीन सेपिया एफएक्स बनाएं
ctx.globalCompositeOperation = 'luminosity';
इस मामले में सीपिया रंग को पहली छवि प्रदान की जाती है।
प्रभाव की मात्रा को अल्फा सेटिंग या फिल ओवरले में संतृप्ति की मात्रा के साथ नियंत्रित किया जा सकता है
// Render the image
ctx.globalCompositeOperation='source-atop';
ctx.fillStyle = "#F80"; // the color of the sepia FX
ctx.fillRect(0, 0, image.width, image.height);
// set the composite operation
ctx.globalCompositeOperation ='luminosity';
ctx.globalAlpha = alpha; // alpha 0 = no effect 1 = full effect
ctx.drawImage(image, 0, 0);
"GlobalAlpha" के साथ अस्पष्टता बदलें
context.globalAlpha=0.50
आप globalAlpha को 0.00 (पूरी तरह से पारदर्शी) और 1.00 (पूरी तरह से अपारदर्शी) के बीच मान में सेट करके नए आरेखण की अस्पष्टता को बदल सकते हैं।
डिफ़ॉल्ट globalAlpha 1.00 (पूरी तरह से अपारदर्शी) है।
मौजूदा आरेखण globalAlpha प्रभावित नहीं हैं।
// draw an opaque rectangle
context.fillRect(10,10,50,50);
// change alpha to 50% -- all new drawings will have 50% opacity
context.globalAlpha=0.50;
// draw a semi-transparent rectangle
context.fillRect(100,10,50,50);