HTML canvas 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 |
|---|
ব্রাউজার সমর্থন
সারণীতে সংখ্যাগুলি প্রথম এই প্রক্রিয়াটি সম্পূর্ণভাবে সমর্থনকারী ব্রাউজারের সংস্করণকে উল্লেখ করেছে
| চ্রোম | এজ | ফায়ারফক্স | স্যাফারি | অপেরা |
|---|---|---|---|---|
| চ্রোম | এজ | ফায়ারফক্স | স্যাফারি | অপেরা |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
মন্তব্য:Internet Explorer 8 এবং তার পূর্ববর্তী সংস্করণগুলি <canvas> ইলেকট্রনিকেন্ট সমর্থন করে না。
