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



visibility  
mode_comment   ۰

html-canvas

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

رسم کردن و کشیدن تصاویر با drawImage

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

توضیحات:

  • image : تصویر مورد نظر رو بصورت یکی از روشهایی که در جلسات قبل توضیح دادیم، میسازیم و آدرس دهی میکنیم
  • x : موقعیت افقی رسم تصویر بر canvas
  • y : موقعیت عمودی  رسم تصویر بر canvas

با این کار متد drawImag، تصویر مورد نظر رو در مختصات x و y رسم میکنه. این تصویر رو در نظر بگیرید:

میخوایم این تصویر رو بر روی Canvas رسم کنیم و یک مسیر رو بر روی اون رسم کنیم. برای اینکار بصورت زیر عمل میکنیم:

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

بزرگ و کوچک کردن تصاویر یا Scaling:

شما میتونین دو تا  ورودی رو در انتهای متد drawImage اضافه کنید و با استفاده از اون width و height مورد نظرتون برای رسم شدن در Canvas رو مشخص کنید. بصورت زیر:

فرض کنید که میخوایم یک تصویر رو تغییر اندازه بدیم و کوچکش کنیم و اون رو بصورت کاشی کاری در کنار هم بچینیم. در اینجا میخوایم یک تصویر رو در 4 ردیف و 3 ستون رسم کنیم. برای اینکار بصورت زیر عمل میکنیم:

خروجی هم بصورت زیر میشه:html5 canvas 50

بهمین راحتی. دیدید که تصویر مورد نظر رو به 50 در 50 پیکسل تغییر اندازه دادیم و اون رو با استفاده از دو حلقه for درون هم، بصورت کاشی کاری در 4 ردیف و 3 ستون کنار هم قرار دادیم.

اگر یادتون باشه و مطالب مربوط به ویژگی های CSS رو دنبال کرده باشید، چند وقت پیش در مورد ویژگی image-rendering توضیحاتی رو دادیم و بیان کردیم زمانی که تصویر مورد نظر رو بزرگ یا کوچک میکنیم، میتونیم با استفاده از این ویژگی، نحوه رندر شدن تصویر Scale شده رو مشخص کنیم و به مرورگر بگیم که بصورت اتوماتیک اون رو بهبود ببخشه یا خیر.

در اینجا هم همچنین کاری رو میتونیم انجام بدیم. مثلا فرض کنید که چنین کدی رو داشته باشیم:

این کد تصویر مورد نظر که بصورت Data URI هست رو درون مختصات 10 و 10 canvas رسم میکنه. این تصویر 4 در 4 پیکسل هست و اگر اون رو بزرگ کنیم بصورت زیر خواهد بود:html5 canvas 51

خب با کدی که در بالا قرار دادیم، تصویر 4 در 4 در موقعیت 10 و 10 رسم میشه. بصورت زیر:html5 canvas 52

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

با اینکار خروجی بصورت زیر میشه:html5 canvas 53

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

میبینید که در بالا vendor prefix ها رو هم قرار دادیم تا در مرورگرهای مختلف به درستی کار کنه. حالا اگر خروجی رو ببینیم، تصویر بصورت پیکسلی در اومده است:html5 canvas 54

بهمین راحتی.

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

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

موفق باشید

یا علی

Source

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

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