ویژگی globalCompositeOperation کانواس HTML
تعریف و استفاده
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 |
|---|
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه‌های اولین مرورگرهایی هستند که این ویژگی را به طور کامل پشتیبانی می‌کنند.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
نکته:نسخه‌های 8 و قدیمی‌تر اینترنت اکسپلورر از عنصر <canvas> پشتیبانی نمی‌کنند.
