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

- visibility ۱۶ mode_comment

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

منحنی و دایره

برای ایجاد دایره یا منحنی، با استفاده از canvas به 5 متغییر برای ذخیره اطلاعات رسم نیاز داریم. این متغییرها عبارتنداز

centerX و centerY : مختصات مرکز دایره

radius :  شعاع دایره

startingAngle وendingAngle : نقطه شروع رسم دایره، و نقطه پایان که مضربی از عدد پی هستند.

مثال : (کدهای htmlمان همان کدهای اولین جلسه هستند.)

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

f2-j3-p1

برای اینکه بهتر متوجه شوید این مقادیر به چه صورت عمل می کنند، به تصویر زیر دقت کنید :

f2-j3-p2

همانطور که مشاهده کردید دایره ما بر اساس این اطلاعات رسم می شود. نقطه ی center یا مرکز دایره، دو مقدار x و y را داراست (به فرض همان سوزن پرگار) (درسِ ریاضی شد!!)، radius یا شعاع دایره، (مقدار باز بودن پرگار) نقطه ی starting همان نقطه ی شروع رسم  (نقطه ی شروع پرگار به رسم) و نقطه ی ending همان نقطه ی توقف یا پایان پرگار ما خواهد بود.(حرکت پرگار ساعت گرد است) درضمن یادتان باشد که همیشه باید نقطه ی شروع و پایان را در عدد پی ضرب کنیم مگر وقتی که نقطه شروع یا پایان صفر باشد (ضرب هر عدد در صفر می شود صفر!). عدد پی برابر است با 3.14 ولی در دستورات جاوااسکریپت از Math.PI استفاده می کنیم.

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

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

f2-j3-p3

شکل های هندسی منظم

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

به طور مثال به کد زیر و نتیجه ی آن دقت کنید.

 

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

f2-j3-p4

شما می توانید، با تغییر اعداد فوق ، مثلا تعداد مربع ها، اندازه مربع ها، جایگزین یک عدد دیگر به جای عدد پی و... شکل های هندسی منظم زیبای دیگری را ایجاد کنید به نمونه های زیر دقت کنید، که فقط با تغییر اعداد فوق ایجاد شده اند :

f2-j3-p5

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

ترکیب تصاویر

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

 

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

f2-j3-p6

Context دیگری وجود دارد، که طریقه روی هم قرار گرفتن دو شکل یا به عبارتی طریقه ترکیب را تعیین می کند بنام context.globalCompositeOperation  و 12 مقدار را می پذیرد.

هر مقدار و تاثیر آن بر دو شکل را می توانید در تصویر زیر ببنید.

f2-j3-p7

به طور مثال :

 

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

info نکته :

چگونه همه ی این contextها را به خاطر بسپارم؟!

حتما این سوال برای شما نیز به وجود آید که چگونه همه ی این contextها را به خاطر بسپارم، وهنگام رسم مشکلی در بیاد آوری آن ها نداشته باشم! پاسخ این سوال این است که اصلا نیازی به حفظ این context ها نیست، بلکه کافیست یکی از این سه راه حل ها را امتحان کنید :

  1. استفاده از کتابخانه های آماده مانند CanvasPlus  به آدرس http://code.google.com/p/canvasplus و کتابخانه ی Artisan JS  به آدرس  http://artisanjs.com
  2. استفاده از تصاویر آماده (در جلسه های آینده با آن آشنا می شویم)
  3. استفاده از ابزارها، مانند پلاگین Canvas برای نرم افزار Illustrator که می تونید اون رو از آدرس http://visitmix.com/labs/ai2canvas دانلود کنید. این پلاگین، تصاویر خلق شده با این نرم افزار را به کدهای جاوااسکریپت جهت استفاده در Canvas تبدیل می کند.

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

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

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

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

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

سجاد دریس

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

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

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

سجاد دریس

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

راد نمازی

سجاد دریس

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

مجتبي

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

سجاد دریس

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

لقمان آوند

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

hiva m

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

لقمان آوند

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

جواد

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

وحید صالحی

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

Saleh M

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

لقمان آوند

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

نیاز به لاگین

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