شروع کار مقدماتی با HTML5 Canvas (جلسه 16) : کار با تصاویر در Canvas - قسمت 3



visibility  
mode_comment   ۰

html-canvas

در جلسه گذشته در مورد روشهای قرار دادن تصاویر درون canvas صحبت کردیم و در این جلسه میخوایم روشهای دیگه رو بهتون توضیح بدیم.

استفاده از یک canvas درون Canvas دیگر:

شما میتونین هر عملیاتی که مورد نظرتون هست رو درون یک canvas انجام بدین و حالا خروجی این canvas رو درون یک canvas دیگه به عنوان ورودی رسم کنید. برای اینکار ما در ابتدا دو canvas رو قرار میدیم:

میبینید که id دو Canvas بالا با هم فرق داره. ما میخوایم به عنوان مثال یک pattern رو درون canvas2 رسم کنیم و بعد از اون canvas2 رو با استفاده از متد drawImage درون canvas رسم میکنیم. خب مرحله اول اینه که یک الگو رو درون canvas2 قرار بدیم. همونطور که در جلسات قبل یاد گرفتیم با استفاده از متد createPattern میتونیم یک الگو رو با استفاده از تصویر مورد نظرمون به وجود بیاریم. پس بصورت زیر عمل میکنیم:

میبینید که استایل اشکال توپر رو برابر با الگوی ساخته شده قرار دادیم و با استفاده از اون یک مستطیل توپر رسم کردیم. تا اینجای کار خروجی بصورت زیر هست:html5 canvas 46

المنت سمت راست همون canvas2 هست. حالا میخوایم canvas2 رو درون canvas یا المنت سمت چپ رسم کنیم. برای اینکار بصورت زیر عمل میکنیم:

دیدید که درون همون متد load مربوط به تصویر، بعد از اینکه الگو رو تعریف کردیم و مستطیل رو درون canvas2 رسم کردیم، با استفاده از متد drawImage، محتویات canvas2 رو درون canvas رسم کردیم. برای اینکار بعنوان ورودی اول، همون canvas2 رو قرار دادیم. با اینکار خروجی بصورت زیر میشه:html5 canvas 47

بهمین راحتی.

استفاده از فریمهای یک ویدیو:

علاوه بر روشهای قبل، میتونین از فریم های یک ویدیو بعنوان ورودی canvas استفاده کنید و اون فریم رو بر روی canvas رسم کنید. ما در ابتدا یک video رو قرار میدیم:

بعد از اون کدهای زیر رو در Javascript قرار میدیم:

همونطور که دیدید در ابتدا video رو درون متغیر مورد نظر ذخیره کردیم. بعد از اون برای رویداد play ویدیو یک callback قرار دادیم و زمانی که بر روی دکمه play کلیک بشه، این تابع اجرا میشه. زمانی که ویدیو play میشه، هر فریم اون بصورت 30 فریم بر ثانیه درون canvas نمایش داده میشه. خروجی بصورت زیر میشه:html5 canvas 48

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

در جلسه بعد مطالب مربوط به تصاویر رو تکمیل میکنیم و به پایان میرسونیم.

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

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

موفق باشید

یا علی

Source

متخصص فرانت اِند
طراحی وب را اصولی فرا بگیرید اگر تصمیمتو گرفتی که به صورت حرفه ای به طراحی UI مشغول بشی و کسب درآمد کنی دوره فرانت اند رو از دست نده، چون توی این دوره هر چیزی که برای رسیدن به هدفت نیاز داری رو در اختیارت قرار می دیم. متخصص فرانت اِند arrow_back
comment دیدگاه کاربران
ارسال نظرات

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