طراحی دایره بارگیری

گام اول :

در ابتدا ما باید یک سند HTML را ایجاد کرده و یک تگ <canvas>در درون بدنه ی این سند ایجاد کنیم .
کد ۱٫۱ گام اول

<html>

<head>
</head>

<body>
<canvas>
</canvas>
</body>

</html>
گام دوم :

در ادامه به تگ یک ID اضاف کرده و آن را برابر با cvs قرار می دهیم . توجه داشته باشید که cvs تنها یک نام است و شما می توانید به جای آن از نام دلخواه خود استفاده کنید ،سپس باید عرض و ارتفاع تگ را مشخص کنیم ، پس صفت width و height را در این تگ وارد کرده و مقادیر هریک از آنها را برابر با ۳۰۰px قرار می دهیم . پس کد ما به شکل زیر در خواهد آمد :
کد ۲٫۱ گام دوم

<html>

<head>
</head>

<body>
<canvas id=”cvs” width=”300px” height=”300px”>
</canvas>
</body>

</html>

با اجرای این دستورات گویی ما یک مستطیل سفید تولید کرده ایم که عرض و ارتفاع آن ۳۰۰ پیکسل است اما درون این مستطیل هنوز چیزی قرار نداده ایم .
گام سوم :

حال نوبت به جاوا اسکریپت می رسد پس ما در بین تگ <body> و </body> تگ های <script> و </script> را اضافه می کنیم تا بتوانیم دستورات جاوا اسکریپت را بین آنها وارد کنیم .تمام دستورات زیر در در بین این دو تگ وارد می شوند ، حال کد ما به شکل زیر در می آید :
کد ۳٫۱

<html>

<head>
</head>

<body>
<canvas id=”cvs” width=”300px” height=”300px”>
</canvas>

<script>
</script>

</body>

</html>

در ادامه یک متغیر ایجاد کرده و نام آن را برابر با canvas قرار می دهیم . توجه کنید که این نام یک نام دلخواه است که شما می توانید آن را به دلخواه تغییر دهید .حال می خواهیم به وسیله ی این متغیر به تگ <canvas> با دستور document.getElementById() دسترسی پیدا کنیم ،قبلا ID تگ <canvas> را برابر با cvs گذاشته ایم پس این نام را در درون پرانتز دستور document.getElementById() قرار می دهیم . پس دستور زیر را وارد می کنیم :
کد فرعی ۳٫۲

var canvas = document.getElementById(“cvs”);

اکنون می خواهیم متدهای لازم برای رسم گرافیک را به وسیله ی دستور getContext(“2d”) ایجاد کنیم ابتدا یک متغیر جدید با نام ctx ایجاد می کنیم ،حال با در نظر گرفتن متغیر canvas متد getContext(“2d) را بر روی آن اعمال می کنیم و آنها را برابر با متغیر ctx قرار می دهیم مثل این دستور:
کد فرعی ۳٫۳

var ctx = canvas.getContext(“2d”);

اکنون باید با استفاده از دستور beginPath() به رایانه بفهمانیم که می خواهیم یک رسم جدید انجام دهیم و کد زیر را می نویسیم :
کد فرعی ۳٫۴

ctx.beginPath();

حال باید با استفاده از دستور strokeStyle برای آنچه که می خواهیم رسم کنیم یک رنگ مشخص کنیم . در اینجا ما رنگ red (قرمز) را مشخص می کنیم و برابر با این دستور قرار می دهیم طبق کد زیر :
کد فرعی ۳٫۵

ctx.strokeStyle = “red”

خب حالا وقت آن است که به وسیله ی دستور arc() یک دایره ی کامل رسم کنیم . این دستور ۶ آرگومان می پذیرد که در ادامه توضیح مختصری را ارائه می دهیم .:

arc(x,y,r,sAngle,eAngle,false)

(x,y) : مشخص کننده نقطه مرکز دایره .

r: مشخص کننده شعاع دایره .

sAngle : مشخص کننده زاویه شروع رسم منحنی دایره . (نسبت به دایره مثلثاتی)

eAngle : مشخص کننده زاویه پایان رسم منحنی دایره .(نسبت به دایره مثلثاتی)

false : مشخص می کند که جهت رسم دایره (نسبت به دایره مثلثاتی) ساعتگرد باشد (این دستور به طور پیش فرض است)اما در صورت استفاده از true جهت رسم به صورت پادساعتگرد خواهد بود .

توجه : واحد زاویه شروع و زاویه پایان رادیان است ، پس خوب است که بدانید برای تبدیل درجه به رادیان باید آن را ضرب در عدد ‘پی’ کرد و سپس تقسیم بر ۱۸۰ کرد . مثلا برای تبدیل ۳۰ درجه به رادیان به صورت روبه رو عمل می کنیم : ۳۰*Math.PI/180 .

همانطور که می دانید یک دایره ی کامل ۳۶۰ درجه است ، پس برای اینکه بتوانیم یک دایره ی کامل را رسم کنیم ، زاویه شروع را ۰ درجه قرار داده و زاویه پایان را ۳۶۰ درجه قرار می دهیم (باید درجه را تبدیل به رادیان کنید) و x و y را به ترتیب برابر با ۱۴۰ و ۱۵۰ (به واحد پیکسل) قرار می دهیم و r (شعاع) را هم برابر با ۱۰۰ پیکسل قرار می دهیم .همچنین برای راحتی کار دو متغیر به نام های sA و sE ایجاد می کنیم و آنها را به ترتیب برابر با ۰ و ۳۶۰ درجه که به رادیان تبدیل شده اند قرار می دهیم و از این متغیر ها به جای زاویه شروع و زاویه پایان استفاده می کنیم ،طبق زیر :
کد فرعی ۳٫۶

var sA=0*(Math.PI/180);
var sE=360*(Math.PI/180);
ctx.arc(140, 150, 100, sA, sE, false);

اکنون وقت آن است که آنچه رسم کرده ایم را به تگ <canvas>اضافه کنیم . پس با استفاده از دستور stroke() این کار را انجام می دهیم طبق دستور زیر :
کد فرعی ۳٫۷

ctx.stroke()

در پایان باید با استفاده از دستور closePath() به رایانه بفهمانیم که می خواهیم رسم پایان بپذیرد . پس کد زیر را می نویسیم :
کد فرعی ۳٫۸

ctx.closePath();

خب تا این مرحله ما یاد گرفتیم که چطور یک حلقه ساده را رسم کنیم با کلیک روی دکمه ی خودتان امتحان کنید نتیجه ی کار را خواهید دید :

nh'

 

پس تا این مرحله کدهای اصلی ما طبق زیر است :
کد ۳٫۱۰  کدهای اصلی پایان گام سوم

۱  <html>

۲  <head>
۳  </head>

۴  <body>
۵   <canvas id=”cvs” width=”300px” height=”300px”>
۶   </canvas>

۷   <script>

۸    var canvas = document.getElementById(“cvs”);
۹    var ctx = canvas.getContext(“2d”);
۱۰   ctx.beginPath();
۱۱   ctx.strokeStyle = “red”;
۱۲   var sA=0*(Math.PI/180);
۱۳   var sE=360*(Math.PI/180);
۱۴   ctx.arc(140, 150, 100, sA, sE, false);
۱۵   ctx.stroke();
۱۶   ctx.closePath();

۱۷  </script>

۱۸ </body>

۱۹ </html>

گام چهارم :

در این مرحله می خواهیم با استفاده از دستور lineWidth() قطر حلقه رسم شده را تغییر دهیم و آن را  به اندازه  مورد نظر   در آوریم     ،‌پس در کد ۳٫۱۰  بین خط ۹ و ۱۰   دستور زیر را وارد می کنیم ، با استفاده از این دستور قطر حلقه ما برابر با ۱۰ پیکسل خواهد شد :
کد فرعی ۴٫۱

ctx.lineWidth = 10;

حال ببینیم که چه تغییری ایجاد شد :

da

گام پنجم :

در این مرحله مرحله قصد داریم به حلقه ی ایجاد شده سایه اضاف کنیم تا کیفیت نمایش آن بهتر شود .

توجه داشته باشید که کدهای اصلی ما به صورت زیر است :

body

برای اینکه در حلقه سایه ایجاد کنیم ابتدا باید رنگی را برای سایه مشخص کنیم ، بدین منظور رنگ دلخواه خود را با استفاده از دستور shadowColor مشخص می کنیم ، در اینجا ما از رنگ #۰۰۰A1A استفاده می کنیم . بنابراین در کد ۵٫۱ بین خط ۱۱ و ۱۲ دستور زیر را وارد می کنیم :

ctx

اکنون قصد داریم مکان قرارگیری سایه نسبت به حلقه را مشخص کنیم . دستور shadowOffsetX فاصله ی افقی سایه را نسبت به حلقه مشخص می کند و دستور shadowOffsetY فاصله ی عمودی سایه را نسبت به حلقه مشخص می کند . اگر مقدار این دو دستور ۰ باشد ، سایه ی ایجاد شده به هیچ سمتی منحرف نمی شود و دور تا دور شکل را در بر می گیرد . پس دو خط زیر را نیز در زیر کد قبلی وارد می کنیم :

va

سپس می خواهیم در سایه ی ایجاد شده محو شدگی ایجاد کنیم ، برای ایجاد محو شدگی از دستور shadowBlur استفاده می کنیم و آن را برابر با ۶ قرار می دهیم . طبق زیر :

bl

پس کد های اصلی ما به صورت زیر در خواهد آمد :

hyr

حال ببینیم که چه تغییری ایجاد شد :

ko

گام ششم :

تا کنون یاد گرفتیم که چگونه حلقه ی مورد نیازمان را طراحی کنیم ، اکنون نوبت به آن رسیده که یک نیم دایره یا یک منحنی که از نیم دایره کمتر باشد را ایجاد کنیم و کاری کنیم که این منحنی درون این حلقه بچرخد ، قبل از وارد شدن به مبحث اصلی کمی در مورد دایره ی مثلثاتی توضیح می دهیم . دایره ی مثلثاتی کاربرد زیادی در فهم این مقاله دارد ، دایره ی مثلثاتی یک دایره است که یک مبدا (زاویه صفر درجه) دارد و با آن می توانیم زاویه های بیش از ۳۶۰ درجه را نیز تعریف کنیم . مبدا دایره مثلثاتی همیشه در گوشه سمت راست این دایره قرار دارد :

54

می خواهیم دستور arc() را که در گام سوم از آن استفاده کردیم بیشتر بشناسیم . وقتی که توسط دستور arc() می خواهید یک منحنی رسم کنید شما باید زاویه شروع و زاویه پایان برای رسم منحنی را بدهید ، مثلا در تصویر بالا فرض کنید می خواهید روی این دایره ، منحنی بین زاویه ۳۰ درجه تا ۴۵ درجه را رسم کنید ،‌برای این کار شما باید در دستور arc() زاویه شروع را برابر با ۳۰ درجه(درجه باید تبدیل به رادیان شود) و زاویه پایان را برابر با ۴۵ درجه (بعد از تبدیل به رادیان) قرار دهید ، البته دقت کنید که رسم طبق عکس بالا در صورتی درست است که جهت رسم ساعتگرد باشد یعنی آرگومان ششم در دستور arc() باید false باشد . در مثال زیر خودتان نتیجه را مشاهده کنید :

wu

hj

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

na

گام هفتم :

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

اینجا است که کاربرد دستور clearRect() آشکار می شود . از این دستور طوری استفاده می کنیم که هر وقت اجرا شود گرافیک رسم شده را حذف کند . اما ما برای این که مدام منحنی رسم کنیم و به سرعت آن را حذف کنیم نیاز داریم تا از دستور setInterval() استفاده کنیم . توسط این دستور می توان یک فاصله ی زمانی در نظر گرفت، پس از گذشت هر فاصله ی زمانی این دستور یک تابع را اجرا می کند .

پس اگر ما دستورات خود را در درون آن تابع بنویسیم ، این دستورات (در یک فاصله زمانی کوتاه) مدام تکرار می شوند .

پس دوباره به سراغ کد نویسی می رویم ،کد های ما تا این لحظه به شکل زیر است :

jai

ابتدا یک دستور setInterval() می نویسیم و تابعی در آن نوشته و دستور ctx.clearRect(0,0,300,300) را در ابتدای تابع وارد می کنیم و سپس کد ها ی خط ۱۰ تا ۱۶ و ۱۹ تا ۲۱ از کد بالا در درون تابع وارد می کنیم و تعیین می کنیم که دستور setInterval() تابع را هر ۶ میلی ثانیه یک بار اجرا کند و خط های ۱۷ و ۱۸ را هم چون تعریف متغیر هستند به بالا منتقل می کنیم و همچنین رنگ حلقه را که در خط ۱۲ تعریف شده است عوض کرده و به رنگ سفید : #FFFFFF تغییر می دهیم تا در گام بعد برخورد رنگ به وجود نیاید :

hr

 

گام هشتم (پایان) :

حالا باید دستورات کد ۶٫۲ در گام ششم را به کدهای خود وارد کنیم توجه کنید که خط های ۱ و ۲ را از کد ۶٫۲ چون تعریف متغیر هستند به بالا منتقل می کنیم :

oo

no

 

اکنون فقط باید در پایان کد خود دو دستور زیر را وارد کنیم ، این دستورات به رایانه می فهماند که با هر بار اجرای تابع منحنی را به اندازه ی ۰٫۰۳ رادیان بچرخاند :

moi

 

 

اکنون کد نویسی ما به پایان رسید  و  کد اصلی ما به صورت زیر است :

clos

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

a

 

13

65

11