آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

سبک های رنگ آمیزی در canvas

سبک های رنگ آمیزی در canvas

فصل چهارم ( معرفی HTML5 )

جلسه  هشتم  ( سبک های رنگ آمیزی در canvas )

سلام خدمت همراهان عزیز مدرسه مجازی ایرانیان

جلسه ی پیش ، canvas رو تعریف کردیم و نحوه ی ساخت اون رو توضیح دادم . تواین جلسه رنگ آمیزی در canvas رو خدمت شما آموزش میدم .

 در جلسه ی پیش ما یه مربع زرد رنگ با حاشیه های قرمز در محدوده ی canvas مون ترسیم کردیم. حالا میخوایم بجای یک رنگ ساده ی زرد ، داخل مربع رو با gradient یا  pattern طرح دار کنیم . برای اینکار بجای استفاده از رنگ در fillStyle میتونیم از CanvasGradient و CanvasPattern استفاده کنیم.

CanvasPattern :

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

 این کد رو درون تایع draw() تعریف می کنیم ، به این شکل :

 تا اینجا ما تصویری که میخوایم باهاش pattern بسازیم و مشخص کردیم. اگر بخوایم از این تصویر برای ساخت توالی رنگ یا همون pattern استفاده کنیم ، با مشکل برمیخوریم چراکه باید اول اجازه بدیم تصویر بارگذاری بشه . برای همین از خصوصیت onload استفاده می کنیم . در این صورت به مرورگر میفهمونیم که زمانی که تصویر رو به صورت کامل دریافت کردی ، الگوی مورد نظرمون رو ایجاد کن :

 این رو هم درون تابع draw() مینویسیم ، به صورت زیر :

 حالا باید الگومون و درون رویداد onload ایجاد کنیم . به کد زیر دقت کنید :

 برای این منظور متد createPattern رو فراخوانی می کنیم و آبجکت image رو با رشته ی repeat بهش اضافه میکنیم تا تصویر ما در دو محور x و  y تکرار بشه . سپس نتیجه ی createPattern رو درون متغییری به نام pattern ذخیره میکنیم و به عنوان مقدار متد fillStyle در نظر میگیریم . حالا بجای رنگ ساده ی زرد ، یک pattern درون مربع ما قرار داره :

pattern in canvas

در نهایت تابع draw() به شکل زیر نوشته شد :

 

 

CanvasGradient :

علاوه بر pattern ، میتونید گرادینت هم به مربع بدید . برای ساخت CanvasGradient یکی از دو متد زیر رو استفاده می کنیم :

–         createLinearGradient(x0,y0,x1,y1)

–         createRadialGradient(x0,y0,r0,x1,y1.r1)

سپس چند رنگ رو به توالی رنگمون اضافه می کنیم .

در متد createLinearGradient مقادیر x0,y0 نشان دهنده نقطه ی شروع توالی رنگ و x1,y1 نشان دهنده نقطه ی پایان توالی رنگ هست .

برای ساخت یک توالی رنگ (گرادینت) و شروع آن از بالا و محو کردن آن به سمت پایین ، نقطه ی شروع رو (۰,۰) تعیین می کنیم .

اگر بخواین که توالی رنگ بصورت افقی باشه و خط جداکننده ی طیف دو رنگ در وسط مربع قرار بگیره ، باید نقطه ی پایان رنگ رو برابر با ارتفاع مربع قرار بدید . مثلا مربع ما دارای ارتفاع ۱۰۰ پیکسل هست ، پس نقطه ی پایان توالی رنگ رو ۱۰۰ قرار میدیم . در نتیجه میشه (۰,۱۰۰) .

خوب برای شروع باید طبق معمول یک متغییر تعریف کنیم و مقادیر طیف رنگ رو درون اون متغییر ذخیره کنیم :

 حالا باید توقف رنگ هامون و تعریف کنیم ، مثلا رنگ ابتدایی آبی باشه و رنگ انتهایی زرد باشه . برای تعیین توقف رنگ ها از متد  addColorStop استفاده می کنیم که دو مقدار  offset و  color رو به خودش اختصاص داده .

Offset : مقدار ۰ نشان دهنده نقطه ی شروع توالی رنگ هست و مقدار ۱ نشان دهنده نقطه پایان توالی رنگ هست .

Color : مقدار color هم رنگ مورد نظر شما رو درون خودش جای میده .

به کد زیر دقت کنید :

 اینجا گفتیم رنگ ابتدایی آبی و رنگ انتهایی زرد باشه . خوب کد ما بصورت کامل به شکل زیر درمیاد :

 در نهایت متغییر gradient رو به متد  fillStyle میدیم تا Gradient رو روی مربع اعمال کنه .

نتیجه ی نهایی :

gradinet in canvas

حالا شما میتونید به دلخواه با تغییر مقادیر نقطه ی شروع و پایان ، طرح گرادینت مربع رو تغییر بدید به مثال های زیر دقت کنید (تغییر مقادیر و طرح های بوجود اومده) :

 gradient in canvas

 gradient in canvas

دیگه بسته به نیاز خودتون مقادیر رو تغییر بدید و استفاده کنید 🙂

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

تهیه شده در مدرسه مجازی ایرانیان

دریافت فایل
رمز تمامی فایل های رمز دار : iranweblearn.com یا iroschool.com

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟