معرفی HTML 5 : فصل دوم – جلسه اول (Canvas API – خط راست)

- visibility ٨ mode_comment

با سلام خدمت دوستان سون لرنی، امیدوارم که حالتون خوب باشه. از این فصل به بعد به توضیح و کاربرد برنامه های کاربردی یا همان API در HTML5 خواهیم پرداخت. اما قبل از آموزش بهتر است که با معنای API و کاربرد آن در HTML5 آشنا شویم

Api چیست

API مخفف عبارت Application Program Interface و به معنای رابط برنامه کاربردی است.

در html5 برنامه هایی وجود دارد، که انجام بعضی کارها را برای ما آسان تر می کنند. به طور مثال نقاشی! یا درگ کردن یک عنصر، تعیین موقعیت جهانی و...

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

Canvas

همانطور که قبلا گفتم، Api های مختلفی در html5 معرفی شده اند، یکی از آن ها canvas یا بوم نقاشی است. ما با استفاده از این api می توانیم، اشکال و طرح های مختلفی را رسم کنیم، اما این رسم و نقاشی مانند نقاشی در برنامه Paint ویندوز نیست! یک سری قواعدی برای ایجاد اشکال مختلفی وجود دارد، که ترکیب آن ها باعث خلق یک طرح با استفاده از html می شود.

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

خب شروع می کنیم:

همانند هر تگی درhtml این API نیز دارای تگی است که به صورت زیر تعریف می شود :

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

دقت کنید که همیشه بایستی با استفاده از دو صفت height و width عرض و ارتفاع بوم نقاشیمان را تعیین کنیم در غیر اینصورت نمی توان چیزی را رسم کرد.

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

 

حال جاوااسکریپت نویسی را شروع می کنیم

برای ترسیم در تگ canvas به دو متغییر نیاز داریم :

ابتدا متغییری برای کنترل تگ canvas ، که به شکل زیر تعریف می شود :

که drawingCanvas  همان مقدار id تگ canvas خواهد بود

دوم متغییری برای ذخیره کدها و دستورهای رسم :

info نکته :

مقدار 2d دو بعدی بودن طرحمان را معین می کند. منظور از دو بعدی همان دو بعد x , y است

بعد از این توضیحات کد کامل صفحه به شکل زیر خواهد بود :

دقت کنید که کدهای canvas بایستی در رویداد window.onload تعریف شوند در غیر اینصورت اجرا نخواهند شد. (نیز می توانید دستورهای رسم را در یک function بنویسید و آن function  را در رویداد onload تگ body فراخوانی کنید)

حال بایستی تگ canvas برایتان قابل مشاهده باشد. پس ترسیم را شروع می کنیم :

ایجاد خط راست  

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

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

f2-j1-p1

همانطور که می بینید یک خط راست از نقطه 0 0 به نقطه ی 400 300 رسم شده است. اما قبل از توضیحات بیشتر بایستی با طریقه مقدار دهی موقعیت ها در canvas آشنا شوید، تصویر زیر توضیح دهنده این موضوع است :

f2-j1-p2

حال به توضیح عبارات نوشته شده در جاوااسکریپت می پردازیم :

خط سوم یعنی context.stroke دستور رسم یک خط راست را می دهد اما قبل از رسم یک خط بایستی نقطه شروع و پایان، رنگ، پنها و... را تعیین کنیم. که این موارد به context setting معروفند.

Context setting های مربوط به خط راست عبارتنداز :

moveTo(x,y) : نقطه شروع رسم خط (مقادیر x و y دو مقدارعددی هستند که x نقطه شروع در عرض(از چپ به راست) و y نقطه شروع از ارتفاع(از بالا به پایین) را نشان می دهد.)

lineTo(x,y) : نقطه پایان رسم خط

بودن این دو مقدار ضروری است و در صورت ننوشتن آن ها خطی رسم نمی شود.

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

context setting بعدی خط راست lineWidth است که پهنای خط را تعیین می کند و به طور زیر مقدار دهی می شود :

که این عدد مقداری بر حسب px خواهد بود.

Context بعدی strokeStyle است که رنگ خط را معیین می کند و صورت زیر مقدار دهی می شود :

به غیر از مبنای هگزا با استفاده از متدهای rgb و rgba  و استفاده از نام رنگ نیز می توان رنگ آن را معیین کرد به طور مثال :

Context بعدی lineCap است که شکل دور خط را معیین می کند و یکی از سه مقدار زیر را می پذیرد :

Butt : همان حالت پیشفرض خط است

Round : گرد کردن دو سر خط

Square : مربع کردن دو سر خط (فرق با حالت عادی این است که مقداری دو سر خط عریض تر می شود.)

برای نمونه به سه خط زیر دقت کنید :

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

f2-j1-p3

info نکته :

زمانی که شما نیاز به شروع رسم شکل جدیدی دارید از متد context.beginPath() بایستی استفاده کنید. این متد باعث می شود شکل قبلی تمام شده به حساب بیاید و context setting هایی که دوباره مقداردهی می کنیم برای شکل بعدی استفاده خواهد شد.

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

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

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

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

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

سجاد دریس

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

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

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

سجاد دریس

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

راد نمازی

سجاد دریس

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

مجتبي

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

سجاد دریس

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

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

hiva m

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

لقمان آوند

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

جواد

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

وحید صالحی

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

Saleh M

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

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

نیاز به لاگین

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