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

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

html-canvas

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

Compositing

در همه مثالهایی که در جلسات قبل با هم بررسی کردیم، شکلهای جدیدی که رسم می‌کردیم، بر روی شکلهای قدیمی‌تر قرار میگرفتن. این نحوه قرار گرفتن اشکال بر روی هم، در بسیاری از موارد مناسب و مطلوب هست ولی در بعضی اوقات شاید اون چیزی که ما میخوایم نباشه و لازم باشه که تغییراتی در اون به وجود بیاریم. در این مواقع با استفاده از ویژگی globalCompositeOperation میتونیم حالت پیش فرض رو تغییر  بدیم.

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

نحوه استفاده از این ویژگی بصورت زیر هست:

ctx.globalCompositeOperation = 'type';

شما میتونین برای ویژگی globalCompositeOperation یکی از 12 نوع و حالت ترکیب شدن رو بصورت رشته ای قرار بدین و با اینکار نحوه ترکیب شدن و قرار گرفتن المنتهای قدیم و جدید فرق خواهند کرد. از حالت‌های زیر میتونین به عنوان مقدار برای ویژگی بالا استفاده کنید:

  • source-over
  • destination-over
  • source-in
  • destination-in
  • source-out
  • destination-out
  • source-atop
  • destination-atop
  • lighter
  • darker
  • xor
  • copy

هر کدام از حالتهای بالا، خروجی متفاوتی رو به وجود میارن که ما در اینجا اونا رو بررسی میکنیم. برای فهم بهتر این قضیه، یک مربع و یک دایره رو با رنگهای متفاوت رسم میکنیم و این ویژگی رو برای اونا امتحان میکنیم. کدها در ابتدا بصورت زیر هستند:

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

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

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

با اینکار خروجی بصورت زیر خواهد بود:

میبینید که بصورت نرمال و طبیعی دایره که المنت جدیدتر هست، بر روی مربع رسم شده است. خب حالا حالتهای مختلف رو با هم بررسی میکنیم.

مقدار source-over:

این مقدار، مقدار پیش فرض ویژگی مورد نظر هست و باعث میشه که اشکال جدید بر روی اشکال قدیمی‌تر رسم شوند. برای استفاده از این ویژگی بصورت زیر عمل میکنیم:

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

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

ctx.globalCompositeOperation = 'source-over';

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

میبینید که به سادگی مقدار ویژگی رو برابر با source-over قرار دادیم. با اینکار خروجی، مثل تصویر قبل خواهد شد:

مقدار source-in:

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

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

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

ctx.globalCompositeOperation = 'source-in';

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

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

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

مقدار source-out:

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

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

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

ctx.globalCompositeOperation = 'source-out';

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

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

مقدار source-atop:

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

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

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

ctx.globalCompositeOperation = 'source-atop';

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

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

به همین راحتی.

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

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

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

نیاز به لاگین

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