ویژگی globalCompositeOperation کanvas

منابع Canvas

تعریف و استفاده

globalCompositeOperation تنظیمات یا بازگشت به نحوه قرار دادن یک تصویر (جدید) بر روی تصویر (موجود) هدف.

تصویر منبع = نقاشی‌ای که قصد دارید در کanvas قرار دهید.

تصویر هدف = نقاشی‌ای که شما در کanvas قرار داده‌اید.

مثال

مثال 1

با استفاده از مقادیر مختلف globalCompositeOperation نقاط مستطیل ترسیم می‌کنیم. مستطیل قرمز تصویر هدف است. مستطیل آبی تصویر منبع است:

　　　　　source-over 　　　　　　　　　　　destination-over

صفحه وب شما پلاگین canvas را پشتیبانی نمی‌کند.

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 نمایش تصویر منبع + تصویر مقصد.
کپی نمایش تصویر منبع. تصویر مقصد را نادیده بگیرید.
xor از عملیات 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> را پشتیبانی نمی‌کنند.

منابع Canvas