ক্যানভাস globalCompositeOperation প্রতিশব্দ

Canvas রেফারেন্স ম্যানুয়েল

বিবরণ ও ব্যবহার

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 সূত্র চিত্রের বাইরে লক্ষ্য চিত্র দেখান।সূত্র চিত্রটি স্বচ্ছ।লক্ষ্য চিত্রটির সূত্র চিত্রের বাইরের অংশটি শুধুমাত্র দেখানো হবে。
হালকা সূত্র চিত্র + লক্ষ্য চিত্র দেখান
কপি সূত্র চিত্র দেখান।লক্ষ্য চিত্রটি অবমূল্যাকরণ করা হয়。
xor সোর্স ইমেজ এবং লক্ষ্য ইমেজকে একত্রিত করতে অসমতা অপারেশন ব্যবহার করা হয়。

টেকনিক্যাল বিবরণ

ডিফল্ট মান: source-over

ব্রাউজার সমর্থন

সারণীতে উল্লিখিত সংখ্যা এই অপারেটরের প্রথম সংস্করণকে নির্দেশ করে যা এই অ্যাট্রিবিউটটি সম্পূর্ণরূপে সমর্থন করে。

চ্রোম এজ ফায়ারফক্স স্যাফারি অপেরা
চ্রোম এজ ফায়ারফক্স স্যাফারি অপেরা
4.0 9.0 3.6 4.0 10.1

মন্তব্য:Internet Explorer 8 এবং তার পূর্ববর্তী সংস্করণগুলি <canvas> ইলেকট্রন সমর্থন করে না。

Canvas রেফারেন্স ম্যানুয়েল