خصائص globalCompositeOperation على لوحة الرسم

دليل مرجعي لـ Canvas

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

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

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

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

مثال

مثال 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 أظهر الصورة الهدف خارج الصورة المصدر. فقط جزء من الصورة الهدف خارج الصورة المصدر سيظهر، الصورة المصدر شفافة.
أفتح أظهر الصورة المصدر + الصورة الهدف.
نسخ أظهر الصورة المصدر. تتجاهل الصورة الهدف.
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>.

دليل مرجعي لـ Canvas