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

توضیحات
هر زمان صحبت از HTML میشه احتمالا اولین چیزی که به ذهن شما میاد کدهای خشک و ساده و ایستایی هست که نهایت هنرشون، گذاشتن متن و لینک و عکس و اینهاست.
این تصور تا قبل از معرفی 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رو هم به صورت کاملا پروژه محور آموزش می بینید.
سبزلرن مثل طبق روال ثابت خودش با آماده کردن یک محتوای کامل، جامع و عمیق به شما کمک میکنه تا به راحتی این تگ رو یاد بگیرید و با انجام دادن پروژه های متعددی که در این دوره به شما آموزش داده میشه، به سطح قابل قبولی برسید و بتونید خیلی راحت هر کار گرافیکی نیاز داشتید پیاده سازی کنید.
این دوره با پشتیبانی رایگان و همیشگی که داره به شما کمک میکنه تا در طی دوره آموزشی و بعد از اون هر زمان با مشکلی رو به رو شدید، با ایجاد سوال در بخش پرسش و پاسخ، خیلی سریع مشکلتون حل بشه.
سبزلرن تمام تلاش خودش رو انجام داده تا به بهترین شکل ممکن شما رو با این تگ قدرتمند آشنا کنه. (واقعیت اینه که مطالب و پروژه هایی که در این دوره به شما آموزش داده شده رو نمیتونید در سطح وب فارسی مشاهده کنید! )
پس تفاوت های اساسی این دوره به صورت خلاصه عبارتند از :
- مشاهده قسمت های اصلی Canvas
به صورت رایگان (40 درصد)
- پروژه محوری و کاربردی بودن مطالب
- صفر تا صد بودن واقعی محتوای آموزشی
- جایگاه این تگ در افزایش کیفیت پروژه مطابق با نیاز بازار کار
- پشتیبانی واقعی. یعنی در این دوره معنی واقعی پشتیبانی رو متوجه میشید و هر موقع در مسیر دوره با مشکل یا سوالی مواجه شدید فقط کافیه سوالتون رو از طریق بخش پشتیبانی دوره مطرح کنید تا مدرس دوره و کارشناسان پشتیبانی در اسرع وقت و با حوصله جواب شمارو بدن.
شرکت کردن یا نکردن در این دوره چه ریسکی داره؟!
جوابش ساده هست. شما اگر با این تگ و قابلیت های اون آشنا نباشید، انگار که از تکنولوژی HTML حدود 20 سال پیش استفاده می کنید که هیچ قابلیت پویا و گرافیکی خاصی نداره. از طرفی نحوه و زمان استفاده از کدهای جاوا اسکریپت در صفحاب وب HTML رو هم یاد نخواهید گرفت.
قطعا با یادگیری این مبحث، یک مهارت جدید به دست میارید که میتونه در روند استخدام و همچنین پروژه های فریلنسری، ارزش کار شمارو بهتر نشون بده و حرفه ای تر به نظر برسید.
در واقع بعد از گذروندن دوره
آموزش Canvasبه درک خیلی خوبی از پیاده سازی انیمیشن ها و نمودار های مختلف و همینطور ساخت بازی های دو بعدی و سه بعدی در سطح وب میرسید که باعث میشه نسبت به افرادی که اطلاعاتی در مورد این تگ قدرتمند ندارن کیلومترها جلو بیفتید!
بعد از اتمام دوره به چه سطحی میرسیم ؟
شما بعد دیدن این دوره میتونید افکت های جالبی که تا الان سایت های مختلف مشاهده کردید رو خودتون به کمک
تگ Canvasپیاده سازی کنید و نیازی به استفاده از کتابخونه هایی مثل PARTICLE JS و CHART JS و همینطور کدهای CSS نخوهید داشت. تا این حد!
میشه گفت قدرتی که این تگ به شما میده به شکلی هست که یک نقطه تمایز با دیگران برای خودتون ایجاد می کنید به طوری که در هر جمعی که باشید، نگاه متفاوت تری نسبت به تخصص و تسلط شما خواهند داشت.
سرعت بالای سایت، کد نویسی آسان و سریع، پشتیبانی مناسب در مرورگرهای مختلف، بهبود سئو و کلی دلیل دیگه باعث شده که تفاوت بین دونستن و ندونستن این تگ، زیاد باشه!
این دوره پیش نیاز خاصی داره که باید قبلش بلد باشم؟
قبل از این دوره شما باید به
جاوا اسکریپت،
HTMLو
CSSمسلط باشید تا بتونید از مطالب این دوره به بهترین شکل استفاده کنید. حداقل این که در حد قابل قبولی با اونها کار کرده باشید و آگاهی کلی داشته باشید.
چطور میتونم پروژه دانشجویان قبلیتون رو ببینم ؟
مدرس هر دوره معمولا صفحه خودش رو در شبکه اجتماعی با شما به اشتراک میگذاره. شما میتونید با دنبال کردن اون با کلی دانشجو و پروژه ای که توسط اونها انجام شده آشنا بشید تا ادعای سبزلرن در مورد کیفیت آموزش ها از جمله
آموزش Canvasبه شما اثبات بشه.
کسانی که مثل خودتون روز اولی داشتن و کلی تردید و نگرانی تو ذهنشون بود اما الان و با ادامه مسیر یادگیریشون در بقیه حوزه ها، به برنامه نویس های حرفه ای تبدیل شدن که هر شرکتی آرزوی همکاری با اونهارو داره . چون از دانشگاه شریف برنامه نویسی یعنی سبزلرن فارغ التحصیل شدن
نظر دانشجو ها در رابطه با این دوره؟
خیلی از شرکت کنندگان دوره بعد از پایان دوره حس خیلی خوبی داشتن چون
Canvasبرای فرانت اند کارها مثل کلید عمل میکنه و یادگیری اون با چنین پروژهای در این سطح، واقعا لذت بخشه. خیلی از دانشجوها در کامنت های این دوره به این موضوع اشاره کردن. شما هم میتونید به کامنت های دوره یه سر بزنید و نظرات دانشجوهای دوره رو ببینید.
چه تضمینی هست که خوب و کامل یاد بگیرم؟
ولی به طور کلی چند دلیل هست که معمولا باعث
عدم نتیجه گیریشما از دوره ها میشه :
- کیفیت پایین محتوای آموزشی و سبک و تسلط مدرس
- عدم اشتیاق و علاقه مندی کافی برای یادگیری
- نبود پشتیبانی در دسترس و قوی در طول آموزش
- عدم مرور و تمرین مطالب (انبار کردن اونها برای روز مبادا !)
پس همه چی حله…
جلسات
معرفی دوره
مبانی Canvas - کدنویسی اولیه
اگه مرورگر کاربر از Canvas ساپورت نکرد چیکار کنیم؟
مختصات در مرورگر - رسم مستطیل به کمک Canvas
روش دوم رسم مستطیل به کمک Canvas
بازی Snake - نحوه پیاده سازی
رسم مار به کمک Canvas
کنترل مار با Arrow Keys کاربر
ورود دوباره مار به محیط بازی
قسمت دوم بازی (غذای مار) - نحوه پیاده سازی
قرارگیری غذا برای مار در موقعیت رندوم
خورده شدن غذا توسط مار
اضافه شدن دم با خوردن غذا
سخن پایانی فصل
رسم 4 ضلعی های تو خالی با Canvas
Config های Canvas برای شکل rect
چطور به کمک Canvas خط راست رسم کنیم؟ 🤔
کار با path در Canvas
پروژه اپ Paint ویندوز - نحوه پیاده سازی
پیاده سازی توابع و Event های لازم برای پروژه
رسم نقاشی طبق رویداد mouseMove
رسم نقطه با کلیک روی برد نقاشی (با mouseDown)
تو Canvas چطور از عکس استفاده کنیم؟
روش دوم برای ساخت عکس های Canvas
چطور به عکس های Canvas فیلتر اعمال کنیم؟
پروژه Image Editor - نحوه پیاده سازی
پیاده سازی Template پروژه
پیاده سازی Eventها و توابع اولیه مورد نیاز
آپلود عکس روی Canvas
پیاده سازی Option های دیفالت عکس
پیاده سازی Filter های مورد نظر کاربر برای عکس
چطور داخل Canvas از Text استفاده کنیم؟
استفاده از متن های Stroke داخل Canvas
تعیین width برای متن
استفاده از متد measureText در متن های Canvas
پروژه Bar Chart - نحوه پیاده سازی
پیاده سازی نمودار به شکل Static
داینامیک سازی چارت
نمایش متن مرتبط با هر میله داخل نمودار
داینامیک کردن چارت در راستای اطلاعات دلخواه کاربر
توسعه قابلیت پاکسازی چارت
کار با متد rotate در canvas
کار با متد scale در canvas
کار با متد مهم clip در canvas
کار با متد translate برای تغییر مبدا canvas
رونمایی از پروژه صفحه شطرنج + نحوه پیاده سازی
پیاده سازی صفحه شطرنج بدون canvas (با Html و Css)
پیاده سازی صفحه شطرنج با canvas - بخش اول
پیاده سازی صفحه شطرنج با canvas - بخش دوم
پیاده سازی صفحه شطرنج با canvas - بخش سوم
پیاده سازی صفحه شطرنج با canvas - بخش چهارم
مفاهیم مقدماتی مربوط به دایرهها از علم هندسه
نحوه رسم شکل های دایرهای با Canvas
ساخت نمودار دایرهای و بازی پینگ پنگ با Canvas (نحوه پیاده سازی)
سخن پایانی دوره
پیش نیاز ها
پشتیبانی
این دوره مجهز به «سبزبات» ربات هوشمند مبتنی بر هوش مصنوعی است.
اگر در حین مشاهده جلسات دوره با سوال یا ابهامی مواجه شدید، میتوانید پرسش خود را از سبزبات بپرسید و در همان لحظه پاسخ دریافت کنید. در صورتی که نیاز به توضیح بیشتر یا پاسخ تخصصی مدرس داشتید، کافی است از سبزبات بخواهید تا سوال شما را به مدرس دوره ارجاع دهد تا مستقیماً توسط مدرس پاسخ داده شود.

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