خاصية globalCompositeOperation في لوحة HTML

دليل مرجعي HTML5 Canvas

التعريف والاستخدام

globalCompositeOperation إعداد الخاصية أو العودة كيفية رسم الصورة المصدر (الجديدة) على الصورة الهدف (القديمة).

الصورة المصدر = الرسم الذي تخطط لوضعه على اللوحة.

الصورة الهدف = الرسم الذي قمت بوضعه على اللوحة.

مثال

مثال 1

رسم مستطيلات باستخدام قيم مختلفة من globalCompositeOperation. المستطيل الأحمر هو الصورة الهدف. المستطيل الأزرق هو الصورة المصدر:

　　　　　source-over 　　　　　　　　　　　　destination-over

لا يدعم متصفحك علامة الكanvas.

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 استخدام عملية التشابك (xor) لدمج الصورة المصدرية مع الصورة الهدفية.

تفاصيل التقنية

القيمة الافتراضية: source-over

دعم المتصفحات

أرقام الجدول تشير إلى إصدار المتصفح الأول الذي يدعم هذه الخاصية بشكل كامل.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

ملاحظة:يستخدم متصفح Internet Explorer 8 وأحدث إصداراته لا يدعم عنصر <canvas>.

دليل مرجعي HTML5 Canvas