آموزش HTML5: تگ Canvas در HTML (قسمت سیزدهم)

قسمت سیزدهم آموزش HTML5

🌼سلامی گرافیکی🌈 و درودی با طعم Canvas🎨 خدمت شما فرهیختگانِ گل🌼

قسمت سیزدهم (آخر)آموزش HTML5 از سری آموزش های برنامه نویسی تحت وب را با انرژی مضاعف آغاز می کنیم. در این جلسه عملاً قصد جمع بندی مطالب HTML را داریم و از این پس سلامی پرشور به CSS3 خواهیم نمود و از دنیای خشک و بی روح HTML به جهانی سرشار از انیمیشن های جذاب سفر خواهیم کرد.

🐾این شما و این هم ویدئو آموزشی Canvas، SVG و Geolocation🐾

 

در این مطلب آموزشی به موضوعات زیر خواهیم پرداخت:

📌آشنایی مختصر با مفاهیم Canvas, SVG, Geolocation

📌دلیل آموزش ندادن این مباحث در کلاس ها

📌نمونه های ساخته شده با SVG و Canvas

📌نقشه راه ما برای فراگیری این مطالب

Canvas در HTML5 به چه معناست؟

واژه Canvas به معنای بوم یا پارچه نقاشی است. باتوجه به این تعریف، تگ <Canvas> در HTML به خودیِ خود هیچ کاری انجام نمی دهد. همانند بوم نقاشی که بدون پالت رنگ حرفی برای گفتن ندارد، Canvas نیز بدون استایل های CSS و توابع JavaScript کارِ محیرالعقولی انجام نخواهد داد.

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

منظور از SVG چیست؟

کلمه SVG سرنام واژه های Scalable Vector Graphics به معنی گرافیک های برداری مقیاس پذیر است. خبر خوب این است که در SVG اغلب، نیازی به استفاده از جاوا اسکریپت نیست (قابل توجه دوستانی که با JS آشنایی ندارند).

SVG بر مبنای زبان XML است. زبان XML یک زبان نشانه گذاری مانند HTML است که جهت انتقال اطلاعات خاص ایجاد شده است. در HTML ما از تگ های از پیش تعریف شده (Pre Define)استفاده می کنیم اما در XML هیچ تگِ از پیش تعیین شده ای وجود ندارد. بلکه خودِ ما مطابق با نیاز خود، تگ ها را به صورت دلخواه می سازیم و در جای درست به کار می بریم. اگر این چند جمله برای شما گنگ و نامفهوم است، کاملاً به شما حق می دهیم. به دلیل این که در رابطه با این موضوعات، تا کنون در سایت صحبتی انجام نشده و در آینده حتماً به طور مفصل این مطالب را همراه با مثال های کاربردی، آموزش خواهیم داد.

GeoLocation چیست؟

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

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

چرا Canvas، SVG و GeoLocation در کلاس ها گفته نمی شود؟

یک پرسش بسیار مهم: با وجود اهمیت این سه موضوع در HTML5، چرا در کلاس های آموزشی کلمه ای درخصوص آن ها گفته نمی شود؟

پاسخ: این سه مبحث، بسیار فراتر از HTML هستند و اشخاصی که به تازگی با HTML آشنا شده اند، نمی توانند درک درستی از این سه موضوع داشته باشند. چراکه هر کدام پیش نیازهای خاص خود را دارند.

برای فراگیری Geolocation و Canvas لازم است تا حداقل های جاوا اسکریپت را بلد باشیم و جهت کار با SVG نیز می باید با تگ های XML آن آشنا باشیم.

نمونه های ساخته شده با Canvas

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

در تصویر زیر متن متحرکی را مشاهده می نمایید که به سادگی با استفاده از چند خط کد JavaScript و CSS3 طراحی شده است:

 

 

در زیر هم کدهای استفاده شده برای پیاده سازی طرح بالا را مشاهده می فرمایید.

 

 

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

 

 

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

 

 

مثال های خارق العاده از SVG

اما در اینجا نیز قصد داریم برخی از نمونه های جذاب SVG را با هم تماشا کنیم و لذت ببریم. همانطور که در بالا نیز اشاره شد، SVG از تگ های اختصاصی XML تشکیل شده است. به عنوان مثال: با بهره گیری از تگ <Circle> می توان یک دایره در سایت خود ایجاد نمود و یا با درجِ تگ <Rect> می توان یک مستطیل رسم کرد. اضافه بر این ماجرا، با استفاده از کدهای CSS3 می توان دایره و کلاً اشکال هندسی ساخته شده با تگ های SVG را به حرکت در آورد و طرح های هیجان انگیزی شبیه عکس زیر ایجاد نمود:

 

 

کدهای CSS و SVG مربوط به تصویر بالا را می توانید در زیر مشاهده کنید:

 

 

اگر پروژه شما سایت آژانس مسافرتی است می توانید از طرح زیر به عنوان Pre Loder صفحات سایت استفاده کنید. البته اگر کمی CSS بلد باشید به راحتی می توانید رنگ آن و یا حتی سرعت چرخشش را نیز باتوجه به نیاز خود تغییر دهید.

 

 

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

 

 

جهت آشنایی کامل با دستورات SVG می توانید از آموزش های باکیفیت و رایگان W3Schools استفاده نمایید.

جمع بندی مقاله Canvas در HTML از نگاه محمدرضا یعقوبی

در این آموزش صرفاً قصد معرفی Geolocation، SVG و Canvas را داشتیم و البته جمع بندی مبحث شیرین HTML. امیدواریم از سری ویدیوهای HTML5 لذت و بهره کافی را برده باشید. در گام بعدی با انگیزه مضاعف CSS3 را آغاز خواهیم کرد.

ضمناً SVG و Canvas محدود به ساخت اشکال هندسی ساده نیستند و با کمی صرف انرژی و چاشنی خلاقیت می توان طرح های شگفت آوری را در وب ایجاد نمود. برای مشاهده این طرح های آماده و رایگان، می توانید به سایت Codepen مراجعه نمایید.

🔥داستان HTML5 به پایان آمد اما بزودی با ماجراهای جدید CSS3 باز خواهیم گشت🔥

پایدار و سربلند باشید. ارادتمند شما، محمدرضا یعقوبی

 

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

رونمایی از محصول قدم صفر کسب و کار + گارانتی بی قید و شرط
همین الان توضیحات محصول را می خوانم