آموزش Canvas برای برنامه نویسان فرانت‌اند

Canvas عمدتا برای پیاده سازی و رسم نمودار های مختلف جهت تحلیل اطلاعات، بک‌گراندها و افکت های متنی انیمیشنی، شکل های گرافیکی مختلف، بازی سازی و ... استفاده میشه. اما حجم کدی که با Canvas مینویسین در مقایسه با Css به شدت کمتر خواهد بود و این موضوع هم سرعت توسعه شما رو افزایش میده و هم حجم سورس کد رو کاهش میده (اعصاب خوردی و باگ رو هم کاهش میده :D) و در نهایت باعث بهبود لود وب سایت و سئو هم میشه.

وضعیت دوره تکمیل شده
مدت زمان دوره 9 ساعت
آخرین بروزرسانی 1401/10/03
روش پشتیبانی آنلاین
پیش نیاز HTML & CSS & JS
نوع مشاهده دانلودی/آنلاین
توضیحات

هر زمان صحبت از HTML میشه احتمالا اولین چیزی که به ذهن شما میاد کدهای خشک و ساده و ایستایی هست که نهایت هنرشون، گذاشتن متن و لینک و عکس و اینهاست.

آموزش Canvas

این تصور تا قبل از معرفی HTML5 تا حدود زیادی درست بود اما از اون به بعد، به حدی قابلیت های گرافیکی جدید به HTML اضافه شد که تکنولوژی قدرتمندی مثل Flash Player رو از میدون تکنولوژی وب محو کرد. یکی از عناصری که این قدرت رو به HTML اضافه کرد، Canvas هست که یک تگ ویژه محسوب میشه و به کمک اون میتونید کلی انیمیشن ها، گرافیک های دو بعدی و سه بعدی، بازی های خفن، جلوه های زیبا و … در سایت خودتون ایجاد کنید.

اما چطور؟!

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

حجم کدی که با Canvas نوشته میشه در مقایسه با Css کمتر هست و این موضوع هم سرعت توسعه شما رو افزایش میده و هم حجم سورس کد پروژه رو کاهش میده. علاوه بر این به دلایل متعدد سرعت لود صفحه و کیفیت سئوی اون رو هم بیشتر میکنه!

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

تو این دوره چی یاد می گیریم و به چه سطحی میرسیم؟

شما در این دوره به صورت قدم به قدم و از آشنایی اولیه با canvas شروع به یادگیری میکنید و تا مباحث پیشرفته این تگ هم خواهید رسید به طوری که هیچ نکته و مطلبی در زمینه Canvas  نمونده باشه که شما ندونید.

اینکه این تگ دقیقا چی هست و هدفش چیه؟ کدوم مرورگرها از اون پشتیبانی میکنن ؟

بعد از این شروع به یادگیری مباحث اصلی این تگ میکنید و پروژه هایی مثل snake game, paint  image editor ، رسم نمودار های حرفه ای با این تگ و کلی موارد دیگه بهتون آموزش داده میشه.

ممکنه شما قبلا با کتابخونه ای مثل particle js  که انیمیشین های وب عالی به سایت اضافه میکنه و یا کتابخونه chartjs که کارش رسم نمودار های حرفه ای برای سایت هست، کار کرده باشید. جالبه بدونید شما با دیدن این دوره، تمام آنچه که برای پیاده سازی افکت های این کتابخونه ها نیاز دارید رو یاد میگیرید و بدون نیاز استفاده از این کتابخونه ها، افکت ها و نمودارهای خودتون رو پیاده سازی خواهید کرد.

این دوره برای چه کسانی مناسب هست؟

یادگیری نحوه استفاده از تگ Canvas برای افرادی که به هر نحو با برنامه نویسی وب سروکار دارن ضروری هست و به طور ویژه برای فرانت اند کارها…

به طور کلی اگه HTML/CSS و همینطور جاوا اسکریپت رو بلدید و به دنبال یک تگ حرفه ای برای به کار بردن المان های گرافیکی در HTML  هستید، این دوره دقیقا برای شما طراحی شده و قطعا از مطالب اون لذت می برید چون تاثیرش روی کار شما حتی در کوتاه مدت محسوس خواهد بود.

تفاوت دوره Canvas سبزلرن با بقیه چی هست و چرا بهترین گزینه محسوب میشه؟

با وجود اینکه این تگ یکی از مهمترین تگ های html  حساب میشه  اما متاسفانه هیچ آموزش فارسی درست، جامع و کاملی برای اون وجود نداره.

در این دوره شما خیلی راحت میتونید مباحث اساسی Canvas رو به صورت رایگان ببینید (40 درصد اول همه دوره های سبزلرن، رایگان هست) و اصلا نیازی نیست هزینه کنید. علاوه بر این مباحث فنی Canvas رو هم به صورت کاملا پروژه محور آموزش می بینید.

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

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

سبزلرن تمام تلاش خودش رو انجام داده تا به بهترین شکل ممکن شما رو با این تگ قدرتمند آشنا کنه. (واقعیت اینه که مطالب و پروژه هایی که در این دوره به شما آموزش داده شده رو نمیتونید در سطح وب فارسی مشاهده کنید! )

پس تفاوت های اساسی این دوره به صورت خلاصه عبارتند از :

  1. مشاهده قسمت های اصلی Canvas به صورت رایگان (40 درصد)
  2. پروژه محوری و کاربردی بودن مطالب
  3. صفر تا صد بودن واقعی محتوای آموزشی
  4. جایگاه این تگ در افزایش کیفیت پروژه مطابق با نیاز بازار کار
  5. پشتیبانی واقعی. یعنی در این دوره معنی واقعی پشتیبانی رو متوجه میشید و هر موقع در مسیر دوره با مشکل یا سوالی مواجه شدید فقط کافیه سوالتون رو از طریق بخش پشتیبانی دوره مطرح کنید تا مدرس دوره و کارشناسان پشتیبانی در اسرع وقت و با حوصله جواب شمارو بدن.

شرکت کردن یا نکردن در این دوره چه ریسکی داره؟!

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

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

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

بعد از اتمام دوره به چه سطحی میرسیم ؟

شما بعد دیدن این دوره میتونید افکت های جالبی که تا الان سایت های مختلف مشاهده کردید رو خودتون به کمک تگ  Canvas  پیاده سازی کنید و نیازی به استفاده از کتابخونه هایی مثل PARTICLE JS  و CHART JS و همینطور کدهای CSS نخوهید داشت. تا این حد!

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

سرعت بالای سایت، کد نویسی آسان و سریع، پشتیبانی مناسب در مرورگرهای مختلف، بهبود سئو و کلی دلیل دیگه باعث شده که تفاوت بین دونستن و ندونستن این تگ، زیاد باشه!

این دوره پیش نیاز خاصی داره که باید قبلش بلد باشم؟

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

چطور میتونم پروژه دانشجویان قبلیتون رو ببینم ؟

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

کسانی که مثل خودتون روز اولی داشتن و کلی تردید و نگرانی تو ذهنشون بود اما الان و با ادامه مسیر یادگیریشون در بقیه حوزه ها، به برنامه نویس های حرفه ای تبدیل شدن که هر شرکتی آرزوی همکاری با اون‌هارو داره . چون از دانشگاه شریف برنامه نویسی یعنی سبزلرن فارغ التحصیل شدن

نظر دانشجو ها در رابطه با این دوره؟

خیلی از شرکت کنندگان دوره بعد از پایان دوره حس خیلی خوبی داشتن چون Canvas  برای فرانت اند کارها مثل کلید عمل میکنه و یادگیری اون با چنین پروژه‌ای در این سطح، واقعا لذت بخشه. خیلی از دانشجوها در کامنت های این دوره به این موضوع اشاره کردن. شما هم میتونید به کامنت های دوره یه سر بزنید و نظرات دانشجوهای دوره رو ببینید.

چه تضمینی هست که خوب و کامل یاد بگیرم؟

ولی به طور کلی چند دلیل هست که معمولا باعث عدم نتیجه گیری شما از دوره ها میشه :

  1. کیفیت پایین محتوای آموزشی و سبک و تسلط مدرس
  2. عدم اشتیاق و علاقه مندی کافی برای یادگیری
  3. نبود پشتیبانی در دسترس و قوی در طول آموزش
  4. عدم مرور و تمرین مطالب (انبار کردن اونها برای روز مبادا !)

دو مورد اینها بر عهده شماست و دو مورد هم بر عهده سبزلرن. ما به شما قول میدیم این آموزش رو با بالاترین کیفیت و موثرترین پشتیبانی در اختیار شما قرار بدیم. شما قول می دید که با علاقه و پشتکار تمام تمرینات رو انجام بدید تا به نتیجه برسید؟!

پس همه چی حله…

سرفصل ها
معرفی دوره
سخن پایانی
نظرات
ثبت نظر جدید
HesamOkati | کاربر
1403/01/18

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

محمدامین سعیدی راد | مدرس
1403/01/18

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

bardya vahydy | دانشجو
1402/11/05

سلام استاد وقت بخیر
استاد فصل کانسپت‌های canvas بخش سوم قسمت ۴ ویدیویی براش وجود نداره لطفا ویدیوش رو قرار بدین یا اگر نیازه به ضبط مجدد داره لطفا ضبط کنید . ممنون🙏🏻

محمدامین سعیدی راد | مدرس
1402/11/05

سلام بردیا جان.
آره ویدئوی این جلسه حذف شده و باید مجدد ضبط بشه.
چشم بزودی ضبط و آپلود می‌کنم 👌❤️

Mosihastam | کاربر
1402/10/02

سلام
خسته نباشید،
من میخواستم این دوره رو بگیرم، یه سوالی برام پیش اومد،
کارای که با Canvas میشه انجام داد رو میشه با
https://rive.app/
هم انجام داد؟
اگه آره، برنامه ای برای آموزش Rive دارین؟

محمدامین سعیدی راد | مدرس
1402/10/02

سلام عزیز.
آره با Canvas میشه ولی باید دانش ریاضی بالایی داشته باشین.

راستش نه، سبزلرن فعلا برنامه‌ای برای Rive نداره ❤️

Alireza1194 | دانشجو
1402/09/11

سلام استاد خسته نباشید. استاد من درحال تموم کردن دوره متخصص js هستم. بعدش پیشنهاد میکنید این دوره رو ببینم یا دوره های مکمل جی اس یا دوره تیلویند؟

محمدامین سعیدی راد | مدرس
1402/09/12

سلام علیرضا جان.
اول دوره های مکمل جاوا اسکریپت، سپس این دوره و سپس تیلویند.

am6247626 | کاربر
1402/08/27

سلام استاد من تو ری اکت چجوری میتونم از این استفاده کنم

محمدامین سعیدی راد | مدرس
1402/08/27

سلام عزیز.
تو این مقاله به طور کامل نحوه استفاده از Canvas در ری‌اکت آموزش داده شده:

https://medium.com/@pdx.lucasm/canvas-with-react-js-32e133c05258

am6247626 | کاربر
1402/08/27

امکانش هست یه دوره براش ضبط کنید

محمدامین سعیدی راد | مدرس
1402/08/28

اگه ری‌اکت و Canvas رو بلد باشین می‌تونین در کنار هم ازشون استفاده کنین.
همیشه دنبال دوره آموزشی آماده نباشین. یکم سرچ کنین و مقاله بخونین، اگه موردی بود تو گروه پشتیبانی دوره ری‌اکت مطرح کنین، راهنماییتون می‌کنم 👌❤️