شرکت طراحی سایت رسارایان

  با 13 سال سابقه کار طراحی و راه اندازی وبسایت های اینترنتی و فروشگاه آنلاین

رسم دایره در canvas

رسم دایره در canvas

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

رسم دایره در canvas

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

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

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

دریافت فایل

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

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

این مورد را ارزیابی کنید
(0 رای‌ها)
  • آخرین ویرایش در یکشنبه, 25 آبان 1393 ساعت 11:26
  • اندازه قلم
محتوای بیشتر در این بخش: « Drag and Drop در HTML5
برای ارسال نظر وارد سایت شوید

خدمات اینترنتی رسا رایان

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

تلفن تماس: 08644223637    تلفن همراه : 09120942434  -  09188665650   ایمیل: این ایمیل آدرس توسط سیستم ضد اسپم محافظت شده است. شما میباید جاوا اسکریپت خود را فعال نمایید