معرفی HTML 5:فصل دوم–جلسه دوم (Canvas API – اشکال هندسی)

- visibility ٣ mode_comment

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

ایجاد شکل های مختلف با استفاده از خط راست

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

الف) مثلث

ابتدا کدهای جاوا اسکریپت زیر را در ویرایشگر کدتون بنویسید (کدهای html و css همان کدهای قسمت اول (جلسه پیش) است.) :

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

حال به ایجاد خطوط می پردازیم. نقطه ی شروع اولین ضلع همان نقطه ی رأس مثلث خواهد بود و ما فقط نقطه ی پایان آن را معیَن می کنیم : (خط 5)

 

ضلع دوم، از نقطه پایان خط اول شروع می شود، و دوباره ما باید فقط نقطه ی پایانش را تعیین کنیم (در اصل نوشتن هر context.linetoی جدید، یک شکست در خط راست ما ایجاد می کند، و مختصات آن، همان مسیر ادامه ی خط راست از نقطه ی شکست است. ) حال به ضلع دوم دقت کنید :

 

و در نهایت ضلع سوم

دقت کنید که مختصات ضلع سوم (خط 7) بایستی با مختصات رأس یکسان باشد، تا مثلث ما بدرستی رسم شود.  و با دستور context.closePath  مثلث را می بندیم. نتیجه کد فوق در مرورگر به صورت زیر خواهد بود :

f2-j2-p1

info نکته :

می توانیم ضلع سوم در مثلث را رسم نکنیم، و بعد از رسم ضلع دوم، از دستور context.closePath استفاده کنیم. این دستور نقطه پایان آخرین خط رسم شده را به اولین نقطه ی شروع (رأس) وصل می کند، که همان ضلع سوم خواهد بود و نیاز به رسم دستی ندارد.

ب) مربع  و مستطیل

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

 

که x  و y مختصات شروع مستطیل یا مربع ما، t-b یک مقدار عددی که اندازه ی دو ضلع بالا و پایین را معیین می کند، و r-l  نیز یک مقدار عددی برای تعیین اندازه های دو ضلع راست و چپ است:

به مثال زیر دقت کنید :

نتیجه کد در مرورگر :

f2-j2-p2

ایجاد شکل های دیگر مانند لوزی، متوازی الاضلاع، مثلث قائمه و .. را به شما موکول می کنم (از روش ایجاد شکست در خط راست مانند مثلث ایجاد می شوند). ولی اگر مشکلی توی ایجادشون داشتین، در بخش نظرات مطرح کنید.

پر کردن درون شکل

ما تا اینجا با دستور strokeStyle توانستیم رنگ خط را معیین کنیم، ولی درون شکل همان رنگ بوم نقاشیمان است (سفید). برای اینکه بتوانیم درون شکل را نیز با رنگی پر کنیم بایستی context های دیگری استفاده کنیم :

context.fillStyle : رنگ پر کننده شکل را تعیین می کنند

context.fill : دستور پر کردن شکل با رنگ انتخابی.

مثال :

info نکته :

در حین نوشتن نام رنگ بر مبنای هگزا، می توانیم از نوشتن علامت شارپ # صرف نظر کنیم.

نتیجه کد در مرورگر :

f2-j2-p3

بسیار خب دوستان، این قسمت از آموزش نیز به پایان رسید. در قسمت بعدی به طریقه ی ایجاد منحنی و دایره ها خواهیم پرداخت.

comment دیدگاه کاربران
عَـلـیــ ـرِضـــ ـآ

خیلی خوب بود
خسته نباشید ❓

محمد بابازاده

ببخشید یک سوال، آیا امکانش هست معادلات چند مجهولی ریاضیات رو با عنصر Canvas رسم کنیم ؟

سجاد دریس

سلام.
100%
این نمونه رو ببیند

محمد بابازاده

اگر بخواییم از راستای z نیز استفاده کنیم و فضای سه بعدی را در 2 بعد نشون بدیم ( مثل همین برگه های کاغذ ) نمونه ای دارید مثل این سایت ؟

سجاد دریس

نه متاسفانه. نمونه ای پیدا نکردم.

راد نمازی

سجاد دریس

سلام.
لطفا یه نمونه بدید، ببینم این وبسایت های سه بعدی به چه شکلن؟!!

مجتبي

سلام
نماد اعتماد الکترونیک تون فقط یک عکس است. تقلبی است!!!!
متاسفم براتون
سایت به این خوبی . برای چی همچنین کاری انجام میدین؟ خجالت داره واقعا

سجاد دریس

بفرمائید به این لینک :
http://www.enamad.ir/ShopList.aspx
و توی کادر “نام دامنه” عبارت 7learn.com رو جستجو کنید.

دوست عزیز به لینکی که اقا سجاد دادند مراجعه کنید و نماد سون لرن رو ببینید .
متاسفانه کد اصلی نماد بعضا باعث کند شدن لود سایت می شد و فقط به همین دلیل از تصویر ساده استفاده کردیم .
لطفا زود قضاوت نکنید!

hiva m

سلام
HTML5 چند قسمته ؟
آموزشش کامل شده ؟

لقمان آوند

آموزش های این فصل تمام شده .

جواد

سلام
چرا پس ادامه نمی دید html5 رو؟
من مشتاقانه منتظرم

وحید صالحی

بزودی دوست عزیز دوره کاملش در سایت برگزار میشه…

Saleh M

سلام آقای اوند
آموزش جدید قرار نمیدید خیلی ازش گذشته ها 6 ماه شد

سلام
آموزش های html5 تموم شده .

نیاز به لاگین

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