آموزش Canvas برای برنامه نویسان فرانتاند
Canvas عمدتا برای پیاده سازی و رسم نمودار های مختلف جهت تحلیل اطلاعات، بک‌گراندها و افکت های متنی انیمیشنی، شکل های گرافیکی مختلف، بازی سازی و … استفاده میشه. اما حجم کدی که با Canvas مینویسین در مقایسه با Css به شدت کمتر خواهد بود و این موضوع هم سرعت توسعه شما رو افزایش میده و هم حجم سورس کد رو کاهش میده (اعصاب خوردی و باگ رو هم کاهش میده :D) و در نهایت باعث بهبود لود وب سایت و سئو هم میشه.
این دوره در وضعیت پیش فروش قرار دارد و ضبط آن در اواسط اردیبهشت شروع میشود
Canvas چیست؟
Canvas بر خلاف اسم سخت و سنگینی که داره، صرفا یکی از تگ های Html هست که در سال 2004 توسط شرکت اپل تو نسخه Html5 ارائه شده و برای پیاده سازی و رسم شکل های گرافیکی در مختصات دو بعدی ازش استفاده میشه. از Canvas میشه برای طراحی و پیاده سازی هر نوع شکل گرافیکی استفاده کرد. هر تگ Canvas که در Html قرار میدین، یه محیط مستطیل شکل تو DOM بهتون میده که میتونین به کمک زبان جاوا اسکریپت هر شکلی که دوست داشتین رو داخلش رسم کنین (عه پای جاوا اسکریپت اومد وسط جذاب‌تر شد :))اما ممکنه براتون سوال باشه که همین اشکال گرافیکی رو با بقیه تگ های Html به همراه Css هم میتونیم پیاده سازی کنیم، پس چه نیازی به یادگیری Csnvas هست؟
عجله نکنین، در ادامه به این سوال مهم پاسخ داده میشه.
از Canvas تو چه پروژه هایی میشه استفاده کرد؟
از Canvas تو هر پروژه‌ای که دوست داشتین میتونین استفاده کنین. از Canvas عمدتا برای پیاده سازی و رسم نمودار های مختلف جهت تحلیل اطلاعات، بک‌گراندها و افکت های متنی انیمیشنی، شکل های گرافیکی مختلف، بازی سازی و … استفاده میشه. اما حجم کدی که با Canvas مینویسین در مقایسه با Css به شدت کمتر خواهد بود و این موضوع هم سرعت توسعه شما رو افزایش میده و هم حجم سورس کد رو کاهش میده (اعصاب خوردی و باگ رو هم کاهش میده :D) و در نهایت باعث بهبود لود وب سایت و سئو هم میشه. پس Canvas با Css قابل مقایسه نیست. حتی گاها طرح هایی که با Canvas پیاده سازی میشن، با Css نمیشه پیاده سازیشون کرد. امروزه Canvas یکی از مواردی است که شما باید به عنوان برنامه نویس فرانت اند بلد باشید و با یادگیری Canvas مهارت و تخصصتون در زمینه فرانت اند رو افزایش میدین.
استفاده از Canvas چه مزایایی دارد؟
- Canvas حجم کدتون رو کاهش میده
- Performance برنامه رو افزایش میده
- سرعت لود وب سایت رو افزایش میده
- حجم Asset های پروژه های کاهش میده
- سرعت توسعه رو افزایش میده
- گسترش پذیری بیشتری داره و میتونین هر نوع شکلی که بهش نیاز داشتین رو پیاده سازی کنین. بدون نیاز به عکس های jpg و png حجیم.
- بدون نیازی به کتابخونه و فریمورک های مختلف میتونین هر نوع نموداری که نیاز دارین رو پیاده سازی کنین
- و …
سوالات متداول
خب بذارین یه مثال بزنم براتون.
شما بدون قاشق هم میتونین غذا بخورین. اما دستاتون روغنی میشه و کلی اذیت میشین. شما بدون Canvas میتونین کلی طرح های گرافیکی به کمک Css و کتابخونه‌ها و فریمورک های اکسترنال پیاده سازی کنین، اما حجم پروژه، سرعت توسعه، سرعت لود و ... آسیب میبینن. Canvas حکم همون قاشق رو داره که هنگام توسعه اشکال گرافیکی نمیذاره اذیت بشین و بهتون کمک میکنه پروژه‌ای با Performance بالا رو داشته باشین
Canvas یکی از تگ های Html هست که به کمک جاوا اسکریپت میتونه شکل‌ها، نمودارها، افکت های انیمیشنی و ... مختلف و جذابی رو سمت فرانت اند پیاده سازی کرد و جلوه بسیار زیبایی (در کنار پرفورمنس بالا) به وب سایت داد.
پس دوره آموزش Canvas برای عزیزانی مناسب هست که قصد فعالیت حرفه‌ای در زمینه برنامه نویسی فرانت اند رو دارن
نه الزامی نیست.
هیچ شرکت برنامه نویسی تو ایران ازتون نمیخواد که Canvas رو بلد باشین و بدون بلد بودن Canvas هم میتونین وارد بازار کار بشین.
اما بلد بودن Canvas برای شما که در زمینه فرانت اند کار میکنین یه امتیاز مثبت و خفن به حساب میاد و هر شرکت برنامه نویسی موقع استخدام از بین چندین برنامه نویس، قطعا اولویت رو به شمایی که Canvas بلدین میده.
پس یادگیری Canvas خالی از لطف نیست و به مهارت و تخصص خودتون تو زمینه فرانت اند کمک میکنه.
به صورت کلی اگه میخواین یک برنامه نویس متخصص فرانت اند باشین، یادگیری Canvas رو براتون پیشنهاد می کنم.
قطعا بله.
اگه یه دوره آموزشی، مخصوصا در زمینه برنامه نویسی، پروژه محور نباشه و پروژه های قابل قبول بازار کار توی دوره پیاده سازی نشن، دانشجوهای دوره نمیتونن مطالب لازم رو یاد بگیرن. پس تو دوره آموزش Canvas چندین پروژه جذاب و خفن مثل نمودار های مختلف، افکت های انیمیشنی، بک گراند متحرک و ... رو پیاده سازی می‌کنیم تا شما عزیزن بعد از گذروندن دوره بتونین از Canvas توی هر پروژه که دوست داشتین استفاده کنین.
اگه یه دوره آموزشی، مخصوصا در زمینه برنامه نویسی، پشتیبانی نداشته باشه و به سوالات دانشجوهای دوره پاسخگویی سریع انجام نشه، عملا دانشجوها نمیتونن مطالب لازم و مورد انتظار رو یاد بگیرن.
به همین دلیل دوره آموزش Canvas پشتیبانی رایگان و مادام العمر داره و تو هر کدوم از مفاهیم Canvas و پروژه های دوره هر سوال یا ابهامی که داشتین میتونین در قسمت پرسش و پاسخ دوره Canvas بپرسین تا با مدرس دوره در ارتباط بوده و سوالتون برطرف بشه.
پیش نیاز دوره آموزش Canvas چیست؟
برای شروع یادگیری Canvas کافیه فقط Html و JavaScript رو بلد باشین. اگه هنوز Html رو بلد نیستین به دوره آموزش مقدماتی تا پیشرفته Html سبزلرن مراجعه کنین. همچنین اگه هنوز با جاوا اسکریپت کار نکردین، به دوره آموزش مقدماتی تا پیشرفته جاوا اسکریپت سبزلرن مراجعه کنین. اما نیاز نیست جاوا اسکریپت رو در حد پیشرفته بلد باشین. همین که دوره جاوا اسکریپت سبزلرن رو تا سطح متوسط گذرونده باشین کفایت میکنه.
محمد امین سعیدی راد
Front End & Back End Developerاول از همه برنامه نویسی اندروید رو شروع کردم و نزدیک به 2 سال با زبان جاوا اندروید کار میکردم .بعد تصمیم گرفتم در زمینه وب فعالیت داشته باشم.و...
نظرات
قوانین ثبت دیدگاه
- دیدگاه های نامرتبط به دوره تایید نخواهد شد.
- سوالات مرتبط با رفع اشکال در این بخش تایید نخواهد شد.
- از درج دیدگاه های تکراری پرهیز نمایید.
- اگر نیاز به پشتیبانی دوره دارید از قسمت پرسش سوال در قسمت نمایش انلاین استفاده نمایید
برای ارسال نظر باید وارد حساب کاربری خود شده باشید.
90,000 تومان
حسین حسین( خریدار محصول )
سلام استاد خسته نباشی
استاد الان داخل خرداد هستیم دوره کی میخواد شروه بشه؟
محمدامین سعیدی راد(مدرس)
سلام حسین جان.
تاخیرِ بوجود اومده بخاطر یسری کارای نقل مکان و دانشگاهیم بود و بابتش ازتون معذرت میخوام و دوره تا دو روز دیگه استارت میخوره حتما 👌❤
Mahdi( خریدار محصول )
استاد دوره کی شروع میشه؟؟؟
محمدامین سعیدی راد(مدرس)
سلام مهدی جان.
دوره Canvas ان‌شالله طی یک هفته آینده استارت میخوره 👌❤
Mahdi( خریدار محصول )
منتظریم😍
timiidman
استاد سوالی که داشتم اینه کع ایا با یادگیری canvas میشه که هر شکل , art و زمینه یا طراحی های 3 بعدی رو درست کرد ؟
محمدامین سعیدی راد(مدرس)
سلام عزیز.
تقریبا بله، اما یسری استثنا و محدودیت‌ها وجود دارن که تو دوره به طور کامل گفته میشن 💪❤
hadi._.jim
سلام واقعا دمتووون گرم بخاطر دوره های درجه یک و پر محتواتون!
آقای سعیدی راد لطف میکنید بگین ثبت نام دوره ی vip ابزار نویسی جناب یلمه به چه صورته؟ و اینکه چه مباحثی رو شامل میشه؟ تو چنتا از کامنت ها دیدم برام سوال شد. مخلصیم.
qadiryolme(مدیریت)
دوست عزیز. دوره ابزارنویسی یک دوره نیمه خصوصی هست که مناسب افرادیه که مباحث پایه امنیتی رو توجیه هستن و برای مشاهده سرفصل ها به سایت اولترا اموز مراجعه کنید
parsa01( خریدار محصول )
سلام خسته نباشید
میشه داخل دوره یک نمودار ارز دیجیتال هم ترسیم کنید 🙂 ؟
محمدامین سعیدی راد(مدرس)
سلام پارسا جان.
راستش در زمینه ارز دیجیتال فعالیت نداشتم.
این موضوع رو بررسی می‌کنم و در صورت صلاحدید، یه نمودار ارز دیجیتال هم تو دوره پیاده سازی می‌کنیم.
morteza( خریدار محصول )
سلام وقت بخیر
دوره کی شروع میشه و چقدر طول می کشه تکمیل بشه؟
خیلی نیازمند این دوره هستم
محمدامین سعیدی راد(مدرس)
سلام مرتضی جان.
دوره Canvas اواسط اردیبهشت شروع میشه و تموم شدنش حداکثر 2 ماه طول می‌کشه.
Mohammad( خریدار محصول )
به به یه دوره دیگه با استاد سعیدی راد💚
abolfazl shabani
سلام سبز لرن داره عالی پیش میره و عاشقتونم، و چند تا سوال داشتم
۱- آیا این دوره طراحی سه بعدی رو هم آموزش میدید
۲- آیا ساخت انیمیشن رو درس میدید مثلا اشکال دوبعدی و سه بعدی
۳- آیا کتابخانه هایی مثل three.JS رو در این دوره تدریس میکنید یا قراره تدریس بکنید
۴- آیا فیچر هایی مثل مایعات و فیزیک رو هم درس میدید یا مثلا اینکه با three.js فیزیک رو اضافه کنیم
و اگه three.js و ساخت اشکال انیمیشنی سه بعدی رو توی این دوره درس نمیدید اولویتتون با threejs باشه
محمدامین سعیدی راد(مدرس)
سلام ابوالفضل جان. ممنونم از نظر لطفتون 🙏❤
1.2. بله در این دوره تمام مباحث مربوط به انیمیشن و طراحی چند بعدی آموزش داده میشه.
3. نه. تو این دوره با Three.js کار نمی‌کنیم. در اصل تو این دوره با هیچ کتابخونه و پلاگینی کار نمی‌کنیم. دوره رو فقط با Canvas و Vanilla JS پیش می‌بریم.
4. منظورتون رو از فیزیک و مایعات متوجه نشدم. لطفا واضح‌تر مطرح کنین.
ان‌شالله در آینده یه دوره خوب و پروژه محور برای Three.js برگزار خواهیم کرد 👌❤
mohammadbaghaei
سلام خدمت استاد سعیدی راد عزیز
بسیار از شما بابت برگزاری این دوره کاربردی تشکر می کنم. بدون شک این دوره هم مثل بقیه دوره هاتون عالی و بی نظیر خواهد بود.
یه خواهشی داشتم
اگر براتون مقدور هست دوره ای برای p5js هم برگزار کنید
خیلی ممنونم 🙂
محمدامین سعیدی راد(مدرس)
سلام محمدجان. خیلی ممنونم از نظر لطفت 🙏❤
کتابخونه P5js جایگاه آنچنان خوب و قابل قبولی تو بازار نداره. یجورایی اولویت نیست. فعلا اولویت با بقیه تکنولوژی هایی هست که بازار کار بهشون نیاز داره.
اما ان‌شالله بعد از تموم شدن دوره های اصلی، دوره های مرتبط با انیمیشن مثل AnimeJS, P5js و … رو برگزار خواهیم کرد 💪❤
Reza79( خریدار محصول )
سلام جناب سعیدی وقت بخیر ، اول اینکه در مورد این دوره شکی نیست که مثل بقیه دوره هاتون میترکونه و خودمم صد در صد قصد شرکت در این دوره رو دارم، حالا سوالم اینه مثلا ما بخوایم تو سایتمون از ی اشکال هندسی استفاده کنیم از clip-path استفاده میکردیم حالا خیلی خیلی زمانبر میشه چون باید مقادیر را هی کم و زیاد کنی تا اون چیزی که میخوای رو درست کنی ، حالا اینجا با ی سرچ ساده با استفاده از generator در چند ثانیه اشکال دلخواهمونو درست کنیم ،، ایا در رابط با canvas چنین generator هایی وجود نداره که کار مارو راحت تر کنه؟؟؟؟ و اینکه canvas در پروژه های واقعی چقدر کاربرد داره؟چون خودم واسه یادگیری html css خیلی تو یوتیوب و سایت های مختلف گشتمو دوره هاشونو دیدم ولی هیچ کدوم راجب ب این صحبت نکردن؟ایا دلیل کم کاربرد بودن canvas هست یا کم سواد بودن مدرس ها؟؟
محمدامین سعیدی راد(مدرس)
سلام رضا جان. ممنونم از نظر لطفت 🙏❤
1. بله برای Canvas هم Generator وجود داره و میتونین برای راجتی کار ازشون استفاده کنین.
2. کاربرد Canvas تو پروژه بستگی به نوع پروژه داره. مثلا اگه بخواین یه Cms یا Dashboard Admin پیاده سازی کنین، به تعداد زیادی نمودار نیاز دارین. خب قاعدتا تو همچین پروژه‌ای خیلی میتونه بهتون کمک کنه.
3. نمیشه گفت کم‌‌سواد بودن. اما چون تو پروژه های خاصی کاربرد داره و بدون Canvas هم میشه کار رو راه بندازیم، توجه آنچنانی بهش نمیشه متاسفانه.
اما یه متخصص و برنامه نویس سنیور فرانتاند باید بلد باشه ✌❤