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

- visibility ۰ mode_comment

html-canvas

در جلسه قبل توضیحاتی در مورد دریافت اطلاعات از بخش مورد نظرمون در Canvas رو براتون قرار دادم و یاد گرفتید که چطور اطلاعات مربوط به پیکسلهای مورد نظر خودتون رو در بیارید و مورد استفاده قرار بدین. در این جلسه قصد داریم متدهای دیگه ای که در زمینه دست کاری در Canvas وجود داره رو بهتون آموزش بدیم.

قرار دادن اطلاعات پیکسلی درون زمینه Canvas

همونطور که دیدید در جلسه قبل از متد getImageData استفاده کردیم و اطلاعات مربوط به پیکسلهای مورد نظرمون رو بدست آوردیم. در مقابل متد putImageData هم وجود داره که میتونین اطلاعات پیکسلی مورد نظرتون رو در محل دلخواه زمینه Canvas قرار بدین. مثلا فرض کنید که من در ابتدا این تصویر رو دارم:

حالا فرض کنید که میام اطلاعات یک مربع 100 در 100 که از نقطه 50 و 50 شروع میشه رو با استفاده از getImageData دریافت میکنم و درون متغیر imageData میزارم:

پس حالا من اطلاعات 10 هزار پیکسل رو درون متغیر imageData دارم و میتونم اون رو هر جا که دوس داشته باشم استفاده کنم. برای اینکار میام از متد putImageData استفاده میکنم و این مربع 100 در 100 رو در نقطه 0 و 0 Canvas قرار میدم. بصورت زیر:

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

میبینید که تونستیم اطلاعات یک بخشی از canvas رو کپی کنیم و اون رو بجای بخش دیگری از Canvas قرار بدیم.

حالا یک مثال رو با هم بررسی میکنیم تا بهتر با نحوه کارکرد این دو ویژگی و قدرتی که دارن، آشنا بشید. در این مثال میخوایم یک تصویر و یک دکمه رو قرار بدیم و قصد داریم زمانی که بر روی دکمه کلیک شد، رنگ مربوط به تصویر مورد نظر Invert یا معکوس بشه. برای اینکار در ابتدا باید اطلاعات همه پیکسلها رو بدست بیاریم و اطلاعات مربوط به هر کدام رو دستکاری کنیم و بعد از اون اطلاعات دستکاری شده رو دوباره درون Canvas قرار بدیم. برای اینکار بصورت زیر عمل میکنیم. کد HTML بصورت زیر هست:

همونطور که دیدید Canvas و دکمه رو قرار دادیم. حالا کدهای javascript زیر رو قرار میدیم:

میبینید که در خط 12 اطلاعات کل پیکسلهای Canvas رو گرفتیم و درون متغیر imageData قرار دادیم و در خط بعد ویژگی data مربوط به این شئ رو درون متغیر data ذخیره کردیم. در خط 24 و 25 به سادگی به دکمه مورد نظر دسترسی پیدا کردیم و برای اون یک رویداد تعریف کردیم که زمانی که این رویداد برای این المنت رخ بده، تابع invert باید اجرا بشه. این تابع مهمترین بخش این کد هست که بصورت زیر تعریف شده:

همونطور که میبینید در این تابع یک حلقه for قرار داده شده که 4 تا 4 تا زیاد میشه و در هر حلقه، 255 رو از مقادیر red و green و blue کم میکنیم و مقدار جدید رو بجای مقدار قبلی قرار میدیم. بعد از اینکه حلقه for همه پیکسلها رو دست کاری کرد، این مقادیر جدید پیکسلها رو با استفاده از متد putImageData درون زمینه Canvas قرار میدیم. بهمین سادگی پیکسلها رو گرفتیم، تغییرات مورد نظرمون رو اعمال کردیم و مجددا اونا رو سر جاشون قرار دادیم. با اینکار خروجی بصورت زیر میشه:لینک دمو هم در زیر قرار میدم که خودتون بتونین تست کنید:

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

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

موفق باشید

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

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