کانسپت های Canvas – بخش اول
3مختصات در مرورگر – رسم مستطیل به کمک Canvas20:01
4روش دوم رسم مستطیل به کمک Canvas17:35
ساخت بازی Snake Game با Canvas
1بازی Snake – نحوه پیاده سازی00:13:16
2رسم مار به کمک Canvas00:14:44
3کنترل مار با Arrow Keys کاربر00:16:49
4ورود دوباره مار به محیط بازی00:08:56
5قسمت دوم بازی (غذای مار) – نحوه پیاده سازی00:12:19
6قرارگیری غذا برای مار در موقعیت رندوم00:17:31
7خورده شدن غذا توسط مار00:11:05
8اضافه شدن دم با خوردن غذا13:43
9سخن پایانی فصل00:05:09
کانسپت های Canvas – بخش دوم
1رسم 4 ضلعی های تو خالی با Canvas12:24
2Config های Canvas برای شکل rect00:08:06
3چطور به کمک Canvas خط راست رسم کنیم؟ 🤔00:14:00
4کار با path در Canvas00:13:41
ساخت اپ Paint ویندوز با Canvas
2پیاده سازی توابع و Event های لازم برای پروژه00:08:09
3رسم نقاشی طبق رویداد mouseMove00:16:01
4رسم نقطه با کلیک روی برد نقاشی (با mouseDown)6:06
کانسپت های Canvas – بخش سوم
1تو Canvas چطور از عکس استفاده کنیم؟00:09:12
2روش دوم برای ساخت عکس های Canvas00:04:16
3چطور به عکس های Canvas فیلتر اعمال کنیم؟00:04:26
4چطور قسمتی از عکس Canvas رو Crop کنیم؟00:00:00
پروژه جذاب Image Editor با Canvas
1پروژه Image Editor – نحوه پیاده سازی00:05:54
2پیاده سازی Template پروژه00:06:45
3پیاده سازی Eventها و توابع اولیه مورد نیاز00:08:37
4آپلود عکس روی Canvas00:06:59
5پیاده سازی Option های دیفالت عکس00:09:28
6پیاده سازی Filter های مورد نظر کاربر برای عکس00:10:20
کانسپت های Canvas – بخش چهارم
1چطور داخل Canvas از Text استفاده کنیم؟00:11:02
2استفاده از متن های Stroke داخل Canvas00:04:42
3تعیین width برای متن00:03:34
4استفاده از متد measureText در متن های Canvas00:06:28
پروژه Bar Chart (نمودار میله‌ای)
1پروژه Bar Chart – نحوه پیاده سازی00:07:48
2پیاده سازی نمودار به شکل Static00:10:39
3داینامیک سازی چارت00:09:04
4نمایش متن مرتبط با هر میله داخل نمودار00:05:00
5داینامیک کردن چارت در راستای اطلاعات دلخواه کاربر00:08:28
6توسعه قابلیت پاکسازی چارت00:06:33
کانسپت های Canvas – بخش پنجم
1کار با متد rotate در canvas00:13:46
2کار با متد scale در canvas00:09:01
3کار با متد مهم clip در canvas00:07:20
4کار با متد translate برای تغییر مبدا canvas00:07:09
پروژه Page Board شطرنج
1رونمایی از پروژه صفحه شطرنج + نحوه پیاده سازی00:08:36
2پیاده سازی صفحه شطرنج بدون canvas (با Html و Css)00:05:50
3پیاده سازی صفحه شطرنج با canvas – بخش اول00:08:36
4پیاده سازی صفحه شطرنج با canvas – بخش دوم00:04:56
5پیاده سازی صفحه شطرنج با canvas – بخش سوم00:13:37
6پیاده سازی صفحه شطرنج با canvas – بخش چهارم00:08:41
کانسپت های Canvas – بخش پنجم (نمودار دایره‌ای)
2نحوه رسم شکل های دایره‌ای با Canvas00:14:35
3ساخت نمودار دایره‌ای و بازی پینگ پنگ با Canvas (نحوه پیاده سازی)00:11:20
همکاری با سبزلرن
Skantmedia@gmail.com –
سلام من نیاز دارم با canvas برای سایت فروش بلیت کنسرت صندلی های هر سالن بصورت کاستوم ایجاد بشه. بعد از دیدن این دوره میتوانم این مورد را پیاده سازی کنم؟
محمدامین سعیدی راد –
سلام عزیز.
منظورتون رو از کاستوم متوجه نشدم.
اگه درست متوجه شده باشم اگه از Canvas برای این کار استفاده نکنین راحت‌تره واستون.
Poudeh –
سلام استاد پیش نیز این دوره چیه
محمدامین سعیدی راد –
سلام عزیز.
دانش خوب در Html Css Js.
Programmer41148 (خریدار محصول) –
این دوره بسیار عالی بود ممنون از سایت خوب سبز لرن
استاد برای بروز رسانی این دوره اموزش three.js و webgl را در نظر بگیرید با تشکر
محمدامین سعیدی راد –
سلام عزیز.
ممنون از لطفتون و خوشحالم که از دوره رضایت کافی داشتین.
در آینده چشم اما سبزلرن فعلا برنامه‌ای برای Threejs نداره.
امیرعلی –
سلام ببخشید canvas کار css رو تو سایت انجام میده؟
محمدامین سعیدی راد –
سلام عزیز.
لطفا جلسه معرفی دوره رو مشاهده کنید، به پاسخ این سوالتون می‌رسید.
باز اگه ابهامی بود در خدمتتون هستم.
Wanheda –
سلام اسناد روز بخیر چنتا سوال داشتم اول اینکه آسا با canvasطراحی سه یعدی هم میشه انجام داد اگر بله آیا در این دوره آموزش داده شده یا نه و ایا در این مورد اپدیتی میدهید ؟
دوم اینکه برای طراحی سه بعدی دوره ای دارید مثل webgl وthree.js و ایا قصد ندارید دوره ای در زمینه پرکنید ؟
محمدامین سعیدی راد –
سلام عزیز.
از خود Canvas برای پیاده سازی 2D استفاده میشه که تو دوره آموزش داده شده.
برای پیاده سازی 3D، در کنار Canvas به WebGL هم نیاز دارین.
حقیقتا خودم تا الان Three.js رو در حد پیشرفته کار نکردم و برای همین سعی می‌کنم برای جلوگیری از افت کیفیت سبزلرن دست به برگزاری همچین دوره‌ای نزنم 👌🖤
mohammadhadi –
ببخشید من دانشجوی ریاضی توی دبیرستان هستم و از لحاظ مباحث الگوریتمی و هندسی الحمدالله مشکلی ندارم اما میخوام بدونم برای اینکه توی این دوره به شکل بر نخوریم باید به چه مباحثی مسلط باشیم و به چه مباحثی آشنا باشیم با تشکر
محمدامین سعیدی راد –
سلام عزیز.
با توضیحاتی که راجع به دانشتون در الگوریتم و علم ریاضی و هندسه دادین، اگه جاوا اسکریپت رو بلد باشین تو یادگیری Canvas به مشکل نمی‌خورین.
هادی حیدری آذر –
سلام آقای سعیدی راد خسته نباشید
چند تا سوال داشتم
1_ پیش نیاز های این دوره چیه؟؟
2_ توی یکی از کامنت ها گفتین برای یادگیری canvas باید دانش بالا داشته باشیم من فعلا پایه نهم هستم آیا میتونم شروع کنم؟؟ یا باید وقتی به مقاطع بالا رفتم یاد بگیرم؟؟
با تشکر
محمدامین سعیدی راد –
سلام هادی جان.
بابت تاخیر در پاسخگویی عذر میخوام 🖤
1. پیش‌نیاز دوره Canvas تسلط خوب روی جاوا اسکریپته.
2. آره میتونی. همین که جاوا اسکریپت رو بلد باشی میتونی Canvas رو هم شروع کنی.
صرفا یسری مفاهیم ریاضی مثل مختصات، یسری کانسپت‌های مربوط به دایره، منحنی، یسری فرمول و … رو اگه بلد باشین بهتر میتونین با Canvas کار کنین و فیچر های بهتری رو هندل کنین.
اما اگه این موارد رو ندونین هم مهم نیست، دونستنشون صرفا مزیت حساب میشه. وگرنه موارد لازم بعنوان پیش نیاز تو خود دوره گفته شده ✌️🖤
ams –
سلام وقتتون بخیر،
می خواستم بدونم یکسری اشکال هستن مثل wave ها و یا blob ها ، می تونیم به کمک canvas اونا رو طراحی کنیم ؟ اونا SVG طراحی میشن؟ اگر با SVG طراحی میشن، دوره ای چیزی براش در نظر گرفتید؟ چون یک سری سایت هستن به صورت بسیار زیبا از انیمیشن ها در جاهای مختلف استفاده می کنن و نوع انیمیشنهاشون هم از نوع SVG هست.
محمدامین سعیدی راد –
سلام عزیز.
آره با Canvas هم میشه پیاده سازی کرد اما Svg بهتر و آسون‌تره.
با Canvas نیازمند دانش بالای یسری فرمول های ریاضی و هندسه هستین.
فعلا دوره‌ای برای Svg برنامه ریزی نشده.
در آینده بهش فکر می‌کنم.
abolfazl shabani (خریدار محصول) –
آقا امین موضوع فصل آخر چیه؟
محمدامین سعیدی راد –
سلام ابوالفضل جان.
پیاده سازی پروژه نمودار دایره‌ای + معرفی چند ایده برای پیاده سازی با Canvas.
abolfazl shabani (خریدار محصول) –
سلام دوره تموم شده؟
محمدامین سعیدی راد –
سلام عزیز، نه.
حدود 1 فصل از دوره مونده تا تکمیل بشه که اونم تا آخر آذر ماه آپلود میشه 👌🖤
medz –
با سلام
ضمن تشكر از زحمات استاد ارجمند جناب آقاي سعيدي راد و جناب آقاي يلمه عزيز. محترماً به اطلاع ميرساند در بخش سوم: کانسپت های Canvas – درس چهارم: چطور قسمتی از عکس Canvas رو Crop کنیم؟ متاسفانه فايل ويدئو آموزش موجود نيست و اگر در فهرست هم مشاهده كنيد زمان صفر را نمايش ميدهد و در فايل دانلود ويدئو canvas26 موجود نميباشد.
حال خواهشمندم مشكل فوق را بررسي و با قرار دادن ويدئو 26 در سايت اين مورد را مرتفع فرماييد. از بذل توجه جنابعالي و مديريت محترم سايت سپاسگزارم.
ارادتمند
محمدامین سعیدی راد –
سلام عزیز.
این مورد رو بررسی کردم و فایل پیوست جلسه موجوده اما متاسفانه ویدئوی جلسه پاک شده انگار و باید مجدد رکورد کنم.
ممنونم از اطلاع رسانی شما و سعی می‌کنم تا اواسط بهمن ماه ویدئوی این جلسه رو مجدد رکورد و آپلود کنم.
بابت این موضوع عذر میخوام ازتون 🙏🖤
mahdi (خریدار محصول) –
سلام استاد وقت بخیر
حدود چند ساعت یا چند جلسه از دوره مونده
و چیا مونده ممنون❤
محمدامین سعیدی راد –
سلام مهدی جان.
تعداد جلسات و مدت زمان رو نمیشه بطور دقیق تخمین زد اما حدودا 40 درصد Canvas بصورت پروژه محور تدریس شده و حدود 60 درصد در زمینه کار با عکس، رسم اشکال دایره‌ای و … همراه با چند پروژه باقی مونده که سعی می‌کنم تا انتهای شهریور ماه دوره رو به اتمام برسونم 👌❤️
ali (خریدار محصول) –
سلام استاد خسته نباشید . دوره تموم شده ؟ اگه نه کی تموم میشه تقریبا
محمدامین سعیدی راد –
سلام علی جان.
سعی می‌کنم دوره رو حداکثر تا انتهای مهر ماه به اتمام برسونم 👌❤️
shahin (خریدار محصول) –
درود خسته نباشید بقیه قسمت ها رو کی اپلود میکنید؟
محمدامین سعیدی راد –
سلام شاهین جان.
فردا شب حدود 10 جلسه به دوره آپلود میشه.
ممنون از توجه و پیگیریتون 🙏❤️
Mahdi (خریدار محصول) –
خیلی عالی و روون آموزش میدید😍
ممنون از آموزش خوبتون😍
محمدامین سعیدی راد –
سلام مهدی جان.
ممنونم از لطفت و خوشحالم که دوره برات مفید بوده.
پر قدرت ادامه بده 💪❤
Mahdi (خریدار محصول) –
استاد قسمت بعد این دوره رو کی آپلود میکنید
محمدامین سعیدی راد –
سلام عزیز.
قسمت های جدید دوره رو همین امشب (آخر شب) آپلود می‌کنم براتون 👌❤
Mahdi (خریدار محصول) –
عالی بود توضیحاتتون
استاد من آموزش جاوا اسکریپت سبز لرن رو تا پایان بخش متوسط دیدم
الان میتونم این دوره رو ببینم؟؟؟
محمدامین سعیدی راد –
سلام مهدی جان،
اره در کنار شروع سطح پیشرفته، میتونی دوره Canvas رو هم کم کم شروع کنی.
Mahdi (خریدار محصول) –
استاد
دوره در حال ضبطه؟؟؟
محمدامین سعیدی راد –
سلام مهدی جان، بله.
جلسات ضبط شده‌ی دوره حداکثر تا 2 روز آینده آپلود میشن 👌❤
حسین حسین (خریدار محصول) –
سلام استاد خسته نباشی
استاد الان داخل خرداد هستیم دوره کی میخواد شروه بشه؟
محمدامین سعیدی راد –
سلام حسین جان.
تاخیرِ بوجود اومده بخاطر یسری کارای نقل مکان و دانشگاهیم بود و بابتش ازتون معذرت میخوام و دوره تا دو روز دیگه استارت میخوره حتما 👌❤
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 هم میشه کار رو راه بندازیم، توجه آنچنانی بهش نمیشه متاسفانه.
اما یه متخصص و برنامه نویس سنیور فرانتاند باید بلد باشه ✌❤