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

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

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

رسم دایره در canvas

4-9

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

جلسه نهم  ( رسم دایره در canvas )

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

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

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

مسیرها در اصل نقشه ای رو برای رسم خط ها ، کمان ها و یا شکل ها برای شما فراهم می کنند که شما با رسم خط بر روی این مسیرها شکل مورد نظرتون رو ترسیم می کنید .

برای رسم اشکال پیچیده ، باید سه مرحله رو طی کنیم : ۱- مسیر رو تعریف کنیم ۲- روی مسیر خط بکشیم ۳- شکل ایجاد شده رو با رنگ دلخواه پر کنیم .

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

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

در ابتدا متد beginPath رو در تابع قرار میدیم (تعیین مسیر رو شروع میکنیم) :

چون برای دایره هیچ متدی وجود نداره باید یک کمان ۳۶۰ درجه ایجاد کنیم تا بتونیم یه دایره ترسیم کنیم . برای اینکار از متد arc استفاده می کنیم . این متد کمان ترسیم می کنه :

 متغییرهای متد arc عبارتند از :

 X و Y نقطه ی شروع دایره رو مشخص میکنه . فاصله ی مرکز دایره از بالا و سمت چپ رو مشخص میکنه .

Radius فاصله ی مرکز دایره با لبه های دایره رو مشخص میکنه ، در واقع اندازه ی دایره با این مقدار بستگی داره .

startAngle و  endAngle زاویه ی شروع و پایان رسم شکل رو مشخص می کنند . مقیاس این دو مقدار رادیان هست . Math.PI نصف دایره رو تشکیل میده وقتی در ۲ ضرب میشه کل دایره رو تشکیل میده .

anticlockwise یک متغییر اختیاری هست . اگر بخواین کمانتان برخلاف چرخش عقربه های ساعت رسم بشه مقدار این متغییر و برابر true قرار میدید . اما چون داریم یه دایره کامل رسم میکنیم این متغییر برای ما اهمیتی نداره . پس استفاده نمیکنیم .

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

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

 علاوه بر متدهای strokeStyle و  fillStyle ما یک متد هم اضافه کردیم . lineWith ضخامت خط حاشیه رو مشخص میکنه که ما ۲ پیکسل رو در نظر میگیریم .

خوب تا اینجا رنگ آمیزی هامون و انجام دادیم . اما باید کارمون و به اتمام برسونیم . اونم رسم خطی هست که روی مسیرمون میکشیم تا دایره ی مارو نمایان کنه . در رسم چهارضلعی ما از fillRect و strokeRect استفاده میکردیم اما حالا باید از متدهای fill و  stroke استفاده کنیم .

 خوب حالا ببینیم چه دایره ای باهم رسم کردیم؟

رسم دایره در canvas

جالب اینجاست که میتونید این تصویر رو ذخیره هم بکنید . روی تصویر کلیک راست کنید و  save image as رو کلیک کنید . حالا میتونید تصویرتون رو ذخیره کنید .

خوب این جلسه به اتمام رسید . امیدوارم مفید واقع شده باشه 🙂

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

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

<<

>>

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



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

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

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

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

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

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

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

  • khosro akbari

    سلام من میخوام با canvas یک پترن پویا درست کنم که توش ستاره ها یا نقطه های سفید در حال حرکت باشند چطور باید اینکار رو انجام بدم؟؟

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

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

سوابق کامل

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

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