تخفیف ویژه هفته کتاب و کتاب خوانی، فرصت یادگیری با 40٪ تخفیف (کد تخفیف: Ketab)
زمان باقی مانده
سبد (0)

تبلیغات

متفرقه JS-رسم خط

برای رسم خط در جاوا اسکریپت ما ابتدا نیاز داریم که تگ <canvas> را بشناسیم.

همچنین ما باید دستورات زیر را بیاموزیم:

1. ()document.getElementById  

 getContext("2d") .2

beginPath() .3

moveTo() .4

lineTo() .5

stroke() .6

در ادامه به توضیح هریک از این دستورات می پردازیم.


معرفی تگ <canvas>

برای رسم گرافیک در وب ما نیاز به تگ <canvas> داریم. 

با استفاده از تگ <canvas> ما قادر خواهیم بود انواع خط ها و دایره ها و بیضی ها  و حتی انیمیشن ها را رسم کنیم .

 کلمه ی canvas به معنی پرده نقاشی یا بوم نقاشی است و همانطور که از اسم آن بر می آید در آن می توان هر چیزی را رسم کرد .

تگ <canvas>وقتی که در ابتدا ایجاد می شود خالی است و چیزی درون آن نیست . 


 مثال 1 : رسم خط با استفاده از <canvas> و جاوا اسکریپت

var c=document.getElementById("cvs");
var context=c.getContext("2d");
context.beginPath();
context.moveTo(0,0);
context.lineTo(300,150);
context.stroke();
خودتان امتحان کنید »

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


وقتی مثال بالا را مشاهده کردید درون ویرایشگر کد های زیر را خواهید دید : 

کدهای مثال 1

1 <html>
2 <body>
3 <canvas id="cvs" width="300px" height="150px" style="border:1px solid #DFDFDF">
4 </cancas> 5 <script> 6 var c=document.getElementById("cvs"); 7 var context=c.getContext("2d"); 8 context.beginPath(); 9 context.moveTo(0,0); 10 context.lineTo(300,150); 11 context.stroke(); 12 </script> 13 </body> 14 </html
>

تشریح کد ها : 

در خط 1 یک سند HTML تعریف شده است . 

در خط 2 بدنه ی HTML تعریف شده است .

در خط 3  همانطور که مشاهده می کنید ما یک تگ <canvas> را تعریف کرده ایم .  و  ID آن را  cvs گذاشته ایم . و در ادامه عرض <canvas> را برابر با 300 پیکسل  و  ارتفاع 

آن را برابر با 150 پیکسل قرار داده ایم .  بعد از این ما یک استایل درون خطی تعریف کرده ایم  .  در درون این استایل با استفاده از border یک کادر  با اندازه یک پیکسل و با رنگ تیره تعریف کرده ایم . توجه کنید که  DFDFDF#  یک عدد هگزادسیمال است که بیان گر یک رنگ است .

در خط 4 تگ <canvas>  را بسته ایم .  

در خط 5 یک تگ <script> ایجاد می کنیم  و در ادامه دستورات رسم خط را وارد می کنیم .

در خط 6 یک متغیر به نام c ایجاد کرده ایم  و آن را برابر با دستور document.getElementById("cvs")  قرار می دهیم . ممکن است در آموزش های مقدماتی این دستور را قبلا  مطالعه کرده باشید اما در اینجا توضیح مختصری درباره ی آن می دهیم . دستور document.getElementById()  برای  ارتباط برقرار کردن با یک عنصر HTML  است . اگر بخواهیم آن را تفسیر کنیم مثل این است که شما به رایانه بگویید : عنصر HTML   که ID آن را درون پرانتز قرار داده ام  ، در نظر بگیر تا با آن ارتباط برقرار کرده و در آن تغییراتی را ایجاد کنم .حال عنصر مورد نظر با ID مشخص در  متغیر c  ذخیره شده است .  

در خط 7  ابتدا باید بفهمیم که دستور c.getContext("2d")  چه کاری را انجام می دهد .این دستور متدهای لازم برای رسم گرافیک درون تگ <canvas>  را فراهم می کند  .  در این خط ما یک متغیر به نام context را تعریف کردیم  و آن را برابر با  c.getContext("2d") قرار داده ایم . اگر شما برنامه نویسی شئ گرا را به طور عمیق مطالعه نکرده اید لازم نیست که در فهم خط 7 تلاش زیادی بکنید ، فقط کافیست که بدانید برای رسم در تگ <canvas>  همیشه باید این خط را  به کد های خود اضاف کنید . 

 در خط 8 از دستور beginPath()   استفاده کرده ایم  ، از این دستور برای ایجاد یک رسم جدید استفاده می شود . 

در خط 9 از دستور  moveTo(x,y)  استفاده کرده ایم . همانطور که می دانید برای رسم یک خط باید دو نقطه داشته باشیم  و آن دو نقطه را به هم وصل کنیم تا یک خط به وجود آید . این دستور نقطه ی شروع رسم خط را مشخص می کند . به عبارت دیگر شما به رایانه می گویید که به نقطه ی (x,y)  برو  تا رسم را از این نقطه شروع کنیم . 

در خط 10 از دستور lineTo(x,y)   استفاده کرده ایم . این دستور نقطه ی دوم را مشخص کرده و از نقطه ی قبلی به این نقطه ی جدید خطی را رسم می کند . 

در خط 11 از دستور stroke() استفاده کرده ایم . با اجرای این دستور خط مورد نظر به تگ <canvas> اضافه می شود . و در آخر در خطوط 12 و 13 و 14 تگ های باز شده را می بندیم . 


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

دستور عملکرد
document.getElementById() برای ارتباط با یک عنصر به وسیله ID استفاده می شود 
getContext("2d")  ایجاد متد های لازم برای برای رسم گرافیک 
beginPath() برای ایجاد یک رسم جدید استفاده می شود
moveTo() نقطه ی شروع رسم را معین می کند
lineTo() نقطه پایانی رسم خط را مشخص می کند
stroke() خط رسم شده را به محیط گرافیکی اضافه می کند

آموزش صوتی JavaScript

بستن
مدرس:
سوال و جواب:

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

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی