شروع کار مقدماتی با HTML5 Canvas (جلسه 23) : Compositing یا ترکیب کردن - قسمت 2

دسته بندی: آموزش
زمان مطالعه: 2 دقیقه
۲۰ اردیبهشت ۱۳۹۶

html-canvas

در جلسه قبل در مورد Compositing یا ترکیب کردن اشکال توضیحاتی رو قرار دادیم. در این جلسه میخوایم این مبحث رو ادامه بدیم.

مقدار destination-over:

با این مقدار شکلهایی که جدید رسم میکنیم، در پشت شکلهایی که در قبل وجود داشته قرار میگیرن. کدهای زیر رو در نظر بگیرید:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = "#09f";
ctx.fillRect(15,15,70,70);

ctx.globalCompositeOperation = 'destination-over';

ctx.fillStyle = "#f30";
ctx.beginPath();
ctx.arc(75,75,35,0,Math.PI*2,true);
ctx.fill();

خروجی در مرورگر بصورت زیر خواهد بود:

مقدار destination-in:

شکل قدیمی فقط در اون جاهایی که با شکل جدید اشتراک داره نمایش داده میشه و بقیه مناطق هم شفاف و غیر قابل دیدن میشن. کدها بصورت زیر میشن:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = "#09f";
ctx.fillRect(15,15,70,70);

ctx.globalCompositeOperation = 'destination-in';

ctx.fillStyle = "#f30";
ctx.beginPath();
ctx.arc(75,75,35,0,Math.PI*2,true);
ctx.fill();

خروجی در مرورگر:

مقدار destination-out:

این مقدار باعث میشه که اون جاهایی از شکل قدیمی که با شکل جدید اشتراک نداره، نمایش داده بشه و بقیه قسمتها مخفی بشن. کدها بصورت زیر میشه:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = "#09f";
ctx.fillRect(15,15,70,70);

ctx.globalCompositeOperation = 'destination-out';

ctx.fillStyle = "#f30";
ctx.beginPath();
ctx.arc(75,75,35,0,Math.PI*2,true);
ctx.fill();

خروجی در مرورگر:

مقدار destination-atop:

شکل جدید در پشت شکل قدیمی قرار میگیره و اون قسمتی از شکل قدیمی که با شکل جدید همپوشانی داره، بر روی شکل حدید نمایش داده میشه. کدها بصورت زیر هست:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = "#09f";
ctx.fillRect(15,15,70,70);

ctx.globalCompositeOperation = 'destination-atop';

ctx.fillStyle = "#f30";
ctx.beginPath();
ctx.arc(75,75,35,0,Math.PI*2,true);
ctx.fill();

خروجی در مرورگر:

مقدار lighter:

اون جاهایی از شکلها که با هم پوشانی دارن، رنگهاشون با هم جمع میشه و قرار داده میشه. کدها بصورت زیر میشه:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = "#09f";
ctx.fillRect(15,15,70,70);

ctx.globalCompositeOperation = 'lighter';

ctx.fillStyle = "#f30";
ctx.beginPath();
ctx.arc(75,75,35,0,Math.PI*2,true);
ctx.fill();

با اینکار رنگ 09f و f30 با هم جمع میشه و رنگ fcf رو به وجود میارن. خروجی بصورت زیر میشه:

مقدار darker دیگه مورد استفاده قرار نمیگیره.

مقدار copy:

در این حالت فقط شکل جدید نمایش داده میشه و شکل قدیمی مخفی میشه. کدها بصورت زیر میشن:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = "#09f";
ctx.fillRect(15,15,70,70);

ctx.globalCompositeOperation = 'copy';

ctx.fillStyle = "#f30";
ctx.beginPath();
ctx.arc(75,75,35,0,Math.PI*2,true);
ctx.fill();

خروجی در مرورگر:

مقدار xor:

شکل قدیم و جدید به جزء اون قسمتهایی که با هم اشتراک دارن، نمایش داده میشن. کدها بصورت زیر هستن:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = "#09f";
ctx.fillRect(15,15,70,70);

ctx.globalCompositeOperation = 'xor';

ctx.fillStyle = "#f30";
ctx.beginPath();
ctx.arc(75,75,35,0,Math.PI*2,true);
ctx.fill();

خروجی در مرورگر بصورت زیر هست:

برای مطالعه بیشتر در این زمینه میتونین این لینک و این لینک رو مطالعه کنید.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !