تبلیغات

رسم تصویر روی canvas در جاوا اسکریپت

در جاوااهمانطور که می دانید تگ < canvas > در HTML خود به تنهایی خروجی  ای بر روی صفحه نداشته و باید به وسیله یک اسکریپت شکل مورد نظر را طراحی کنید و نشان دهید. با فول کده همراه باشید.

در این پست قصد داریم تا به نحوه نمایش یک عکس در canvas بپردازیم. و این عکس رو هم از یک تگ img می خواهیم بگیریم.

حال یک canvas نیز در صفحه قرار می دهیم:

در نهایت اسکریپت ما:

المنت canvas را در متغیر c قرار داده ایم و سپس حالت دو بعدی را ایجاد کرده ایم و با گرفتن المنت img و استفاده از حالت دو بعدی canvas و متد drawImage شروع به رسم عکس کرده ایم.
ورودی متد drawImage پارامتر های متنوعی رو می پذیره که در این جا ما سه پارامتر رو به داخلش ارسال کرده ایم. پارامتر اول که المنت عکس می باشد و در مورد دو پارامتر دیگر یعنی sx و sy نیز توضیج می دهیم.
Sx یعنی عکس به آن اندازه از چپ canvas فاصله بگیرد و sy نیز یعنی به آن اندازه از بالای canvas فاصله بگیرد. در مورد این مثال عکس ما از اطراف خود فاصله 10 پیکسلی خواهد داشت چرا که اندازه عرض عکس 220 بوده و اندازه canvas 240 و اندازه ارتفاع عکس 277 بوده و اندازه canvas 297 و با این حساب از اطراف به اندازه 10 فاصله خواهد داشت.

تبلیغات
0
کانال تلگرام فول کده
تبلیغات

درباره نویسنده

هادی اکبرزاده

[ مدیر فول کده ]

علاقه‌مند به اشتراک گذاری اطلاعات در هر زمینه‌ای / برنامه‌نویس

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نظرات ثبت شده بدون دیدگاه