Canvas Composite Property

‎تركيب نمودن در بوم ـCanvas Compositing

‎در اين صفحه نحوي تركيب نمودن اشكال روي بوم را تشريح ميشود .دو ويژگي براي اين كار مطابق ‎جدول زير موجود است كه دراين عمل نقش اساسي دارند.

‎ويژگيCanvas globalAlpha

‎ويژگي‎globalAlpha‎ مقدار شفافيت ‎Alpha‎ رنگ نقشه شئ context ‎تنظيم ويابرگشت ميدهد .مقدار اين ويژگي بايد بين‎0‎ كاملا شفاف و‎1‎ ‎غير شفاف باشد.

‎مثال ـ مستطيلي قرمز كشيده ميشود، سپس شفافيت روي‎0.5‎ تنظيم و و دومستطيل ‎آبي وسبز كشيده ميشود.

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);

// Turn transparency on
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);

‎فرمت اسفاده ـSyntax

context.globalAlpha=number

‎.‎ويژگيCanvas globalCompositeOperation

‎ويژگي‎ globalCompositeOperation ‎.نحوه ترسيم شكلي ‎(source)‎ ‎روي شكل ديگر‎(destination)‎ تنظيم ويابرگشت ميدهد .

• source‎ـ نقاشي كه مي خواهيد روي بوم بكشيد .
• destination‎ـ نقاشي هائيكه قبلا روي بوم كشيده شده است .

‎مثال ـ ترسيم دو مستطيل قرمز بعنوان مقصد و دو مستطيل آبي بعنوان منبع

const canvas = document.getElementById("myCanvas");
const ctx = canvas.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);

‎فرمت استفاده ـSyntax

context.globalCompositeOperation="value"

‎مقادير پارامتر ـParameter Values

‎مثال ـ همه مقادير ويژگيglobalCompositeOperation