88,500 تومان

پس از خرید، بلافاصله به محتوای دوره دسترسی خواهید داشت و میتوانید دوره را مشاهده و یا دانلود کنید.

(دیدگاه 25 کاربر)

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

 

مباحث این دوره

57 درس9:1:58

معرفی دوره

کانسپت های Canvas – بخش اول

ساخت بازی Snake Game با Canvas

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

ساخت اپ Paint ویندوز با Canvas

کانسپت های Canvas – بخش سوم

پروژه جذاب Image Editor با Canvas

کانسپت های Canvas – بخش چهارم

پروژه Bar Chart (نمودار میله‌ای)

کانسپت های Canvas – بخش پنجم

پروژه Page Board شطرنج

کانسپت های Canvas – بخش پنجم (نمودار دایره‌ای)

سخن پایانی

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

  1. امیرعلی

    سلام ببخشید canvas کار css رو تو سایت انجام میده؟

    • محمدامین سعیدی راد

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

  2. Wanheda

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

    • محمدامین سعیدی راد

      سلام عزیز.
      از خود Canvas برای پیاده سازی 2D استفاده میشه که تو دوره آموزش داده شده.
      برای پیاده سازی 3D، در کنار Canvas به WebGL هم نیاز دارین.

      حقیقتا خودم تا الان Three.js رو در حد پیشرفته کار نکردم و برای همین سعی می‌کنم برای جلوگیری از افت کیفیت سبزلرن دست به برگزاری همچین دوره‌ای نزنم 👌🖤

  3. mohammadhadi

    ببخشید من دانشجوی ریاضی توی دبیرستان هستم و از لحاظ مباحث الگوریتمی و هندسی الحمدالله مشکلی ندارم اما میخوام بدونم برای اینکه توی این دوره به شکل بر نخوریم باید به چه مباحثی مسلط باشیم و به چه مباحثی آشنا باشیم با تشکر

    • محمدامین سعیدی راد

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

  4. هادی حیدری آذر

    سلام آقای سعیدی راد خسته نباشید
    چند تا سوال داشتم
    1_ پیش نیاز های این دوره چیه؟؟
    2_ توی یکی از کامنت ها گفتین برای یادگیری canvas باید دانش بالا داشته باشیم من فعلا پایه نهم هستم آیا میتونم شروع کنم؟؟ یا باید وقتی به مقاطع بالا رفتم یاد بگیرم؟؟
    با تشکر

    • محمدامین سعیدی راد

      سلام هادی جان.
      بابت تاخیر در پاسخگویی عذر می‌خوام 🖤

      1. پیش‌نیاز دوره Canvas تسلط خوب روی جاوا اسکریپته.

      2. آره میتونی. همین که جاوا اسکریپت رو بلد باشی میتونی Canvas رو هم شروع کنی.
      صرفا یسری مفاهیم ریاضی مثل مختصات، یسری کانسپت‌های مربوط به دایره، منحنی، یسری فرمول و … رو اگه بلد باشین بهتر میتونین با Canvas کار کنین و فیچر های بهتری رو هندل کنین.
      اما اگه این موارد رو ندونین هم مهم نیست، دونستنشون صرفا مزیت حساب میشه. وگرنه موارد لازم بعنوان پیش نیاز تو خود دوره گفته شده ✌️🖤

  5. ams

    سلام وقتتون بخیر،
    می خواستم بدونم یکسری اشکال هستن مثل wave ها و یا blob ها ، می تونیم به کمک canvas اونا رو طراحی کنیم ؟ اونا SVG طراحی میشن؟ اگر با SVG طراحی میشن، دوره ای چیزی براش در نظر گرفتید؟ چون یک سری سایت هستن به صورت بسیار زیبا از انیمیشن ها در جاهای مختلف استفاده می کنن و نوع انیمیشنهاشون هم از نوع SVG هست.

    • محمدامین سعیدی راد

      سلام عزیز.
      آره با Canvas هم میشه پیاده سازی کرد اما Svg بهتر و آسون‌تره.
      با Canvas نیازمند دانش بالای یسری فرمول های ریاضی و هندسه هستین.

      فعلا دوره‌ای برای Svg برنامه ریزی نشده.
      در آینده بهش فکر می‌کنم.

  6. abolfazl shabani (خریدار محصول)

    آقا امین موضوع فصل آخر چیه؟

    • محمدامین سعیدی راد

      سلام ابوالفضل جان.
      پیاده سازی پروژه نمودار دایره‌ای + معرفی چند ایده برای پیاده سازی با Canvas.

  7. abolfazl shabani (خریدار محصول)

    سلام دوره تموم شده؟

    • محمدامین سعیدی راد

      سلام عزیز، نه.
      حدود 1 فصل از دوره مونده تا تکمیل بشه که اونم تا آخر آذر ماه آپلود میشه 👌🖤

  8. medz

    با سلام
    ضمن تشكر از زحمات استاد ارجمند جناب آقاي سعيدي راد و جناب آقاي يلمه عزيز. محترماً به اطلاع ميرساند در بخش سوم: کانسپت های Canvas – درس چهارم: چطور قسمتی از عکس Canvas رو Crop کنیم؟ متاسفانه فايل ويدئو آموزش موجود نيست و اگر در فهرست هم مشاهده كنيد زمان صفر را نمايش ميدهد و در فايل دانلود ويدئو canvas26 موجود نميباشد.
    حال خواهشمندم مشكل فوق را بررسي و با قرار دادن ويدئو 26 در سايت اين مورد را مرتفع فرماييد. از بذل توجه جنابعالي و مديريت محترم سايت سپاسگزارم.
    ارادتمند

    • محمدامین سعیدی راد

      سلام عزیز.
      این مورد رو بررسی کردم و فایل پیوست جلسه موجوده اما متاسفانه ویدئوی جلسه پاک شده انگار و باید مجدد رکورد کنم.
      ممنونم از اطلاع رسانی شما و سعی می‌کنم تا اواسط بهمن ماه ویدئوی این جلسه رو مجدد رکورد و آپلود کنم.

      بابت این موضوع عذر می‌خوام ازتون 🙏🖤

  9. mahdi (خریدار محصول)

    سلام استاد وقت بخیر
    حدود چند ساعت یا چند جلسه از دوره مونده
    و چیا مونده ممنون❤

    • محمدامین سعیدی راد

      سلام مهدی جان.
      تعداد جلسات و مدت زمان رو نمیشه بطور دقیق تخمین زد اما حدودا 40 درصد Canvas بصورت پروژه محور تدریس شده و حدود 60 درصد در زمینه کار با عکس، رسم اشکال دایره‌ای و … همراه با چند پروژه باقی مونده که سعی می‌کنم تا انتهای شهریور ماه دوره رو به اتمام برسونم 👌❤️

  10. ali (خریدار محصول)

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

    • محمدامین سعیدی راد

      سلام علی جان.
      سعی می‌کنم دوره رو حداکثر تا انتهای مهر ماه به اتمام برسونم 👌❤️

  11. shahin (خریدار محصول)

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

    • محمدامین سعیدی راد

      سلام شاهین جان.
      فردا شب حدود 10 جلسه به دوره آپلود میشه.
      ممنون از توجه و پیگیریتون 🙏❤️

  12. Mahdi (خریدار محصول)

    خیلی عالی و روون آموزش میدید😍
    ممنون از آموزش خوبتون😍

    • محمدامین سعیدی راد

      سلام مهدی جان.
      ممنونم از لطفت و خوشحالم که دوره برات مفید بوده.
      پر قدرت ادامه بده 💪❤

  13. Mahdi (خریدار محصول)

    استاد قسمت بعد این دوره رو کی آپلود میکنید

    • محمدامین سعیدی راد

      سلام عزیز.
      قسمت های جدید دوره رو همین امشب (آخر شب) آپلود می‌کنم براتون 👌❤

  14. Mahdi (خریدار محصول)

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

    • محمدامین سعیدی راد

      سلام مهدی جان،
      اره در کنار شروع سطح پیشرفته، میتونی دوره Canvas رو هم کم کم شروع کنی.

  15. Mahdi (خریدار محصول)

    استاد
    دوره در حال ضبطه؟؟؟

    • محمدامین سعیدی راد

      سلام مهدی جان، بله.
      جلسات ضبط شده‌ی دوره حداکثر تا 2 روز آینده آپلود میشن 👌❤

  16. حسین حسین (خریدار محصول)

    سلام استاد خسته نباشی
    استاد الان داخل خرداد هستیم دوره کی میخواد شروه بشه؟

    • محمدامین سعیدی راد

      سلام حسین جان.
      تاخیرِ بوجود اومده بخاطر یسری کارای نقل مکان و دانشگاهیم بود و بابتش ازتون معذرت میخوام و دوره تا دو روز دیگه استارت میخوره حتما 👌❤

  17. Mahdi (خریدار محصول)

    استاد دوره کی شروع میشه؟؟؟

  18. timiidman

    استاد سوالی که داشتم اینه کع ایا با یادگیری canvas میشه که هر شکل , art و زمینه یا طراحی های 3 بعدی رو درست کرد ؟

    • محمدامین سعیدی راد

      سلام عزیز.
      تقریبا بله، اما یسری استثنا و محدودیت‌ها وجود دارن که تو دوره به طور کامل گفته میشن 💪❤

  19. hadi._.jim

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

    • qadiryolme

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

  20. parsa01 (خریدار محصول)

    سلام خسته نباشید
    میشه داخل دوره یک نمودار ارز دیجیتال هم ترسیم کنید 🙂 ؟

    • محمدامین سعیدی راد

      سلام پارسا جان.
      راستش در زمینه ارز دیجیتال فعالیت نداشتم.
      این موضوع رو بررسی می‌کنم و در صورت صلاحدید، یه نمودار ارز دیجیتال هم تو دوره پیاده سازی می‌کنیم.

  21. morteza (خریدار محصول)

    سلام وقت بخیر
    دوره کی شروع میشه و چقدر طول می کشه تکمیل بشه؟
    خیلی نیازمند این دوره هستم

    • محمدامین سعیدی راد

      سلام مرتضی جان.
      دوره Canvas اواسط اردیبهشت شروع میشه و تموم شدنش حداکثر 2 ماه طول می‌کشه.

  22. Mohammad (خریدار محصول)

    به به یه دوره دیگه با استاد سعیدی راد💚

  23. abolfazl shabani

    سلام سبز لرن داره عالی پیش میره و عاشقتونم، و چند تا سوال داشتم

    ۱- آیا این دوره طراحی سه بعدی رو هم آموزش میدید
    ۲- آیا ساخت انیمیشن رو درس میدید مثلا اشکال دوبعدی و سه بعدی
    ۳- آیا کتابخانه هایی مثل three.JS رو در این دوره تدریس میکنید یا قراره تدریس بکنید
    ۴- آیا فیچر هایی مثل مایعات و فیزیک رو هم درس میدید یا مثلا اینکه با three.js فیزیک رو اضافه کنیم

    و اگه three.js و ساخت اشکال انیمیشنی سه بعدی رو توی این دوره درس نمیدید اولویتتون با threejs باشه

    • محمدامین سعیدی راد

      سلام ابوالفضل جان. ممنونم از نظر لطفتون 🙏❤
      1.2. بله در این دوره تمام مباحث مربوط به انیمیشن و طراحی چند بعدی آموزش داده میشه.
      3. نه. تو این دوره با Three.js کار نمی‌کنیم. در اصل تو این دوره با هیچ کتابخونه و پلاگینی کار نمی‌کنیم. دوره رو فقط با Canvas و Vanilla JS پیش می‌بریم.
      4. منظورتون رو از فیزیک و مایعات متوجه نشدم. لطفا واضح‌تر مطرح کنین.

      ان‌شالله در آینده یه دوره خوب و پروژه محور برای Three.js برگزار خواهیم کرد 👌❤

  24. mohammadbaghaei

    سلام خدمت استاد سعیدی راد عزیز

    بسیار از شما بابت برگزاری این دوره کاربردی تشکر می کنم. بدون شک این دوره هم مثل بقیه دوره هاتون عالی و بی نظیر خواهد بود.

    یه خواهشی داشتم
    اگر براتون مقدور هست دوره ای برای p5js هم برگزار کنید

    خیلی ممنونم 🙂

    • محمدامین سعیدی راد

      سلام محمدجان. خیلی ممنونم از نظر لطفت 🙏❤
      کتابخونه P5js جایگاه آنچنان خوب و قابل قبولی تو بازار نداره. یجورایی اولویت نیست. فعلا اولویت با بقیه تکنولوژی هایی هست که بازار کار بهشون نیاز داره.
      اما ان‌شالله بعد از تموم شدن دوره های اصلی، دوره های مرتبط با انیمیشن مثل AnimeJS, P5js و … رو برگزار خواهیم کرد 💪❤

  25. Reza79

    سلام جناب سعیدی وقت بخیر ، اول اینکه در مورد این دوره شکی نیست که مثل بقیه دوره هاتون میترکونه و خودمم صد در صد قصد شرکت در این دوره رو دارم، حالا سوالم اینه مثلا ما بخوایم تو سایتمون از ی اشکال هندسی استفاده کنیم از clip-path استفاده میکردیم حالا خیلی خیلی زمانبر میشه چون باید مقادیر را هی کم و زیاد کنی تا اون چیزی که میخوای رو درست کنی ، حالا اینجا با ی سرچ ساده با استفاده از generator در چند ثانیه اشکال دلخواهمونو درست کنیم ،، ایا در رابط با canvas چنین generator هایی وجود نداره که کار مارو راحت تر کنه؟؟؟؟ و اینکه canvas در پروژه های واقعی چقدر کاربرد داره؟چون خودم واسه یادگیری html css خیلی تو یوتیوب و سایت های مختلف گشتمو دوره هاشونو دیدم ولی هیچ کدوم راجب ب این صحبت نکردن؟ایا دلیل کم کاربرد بودن canvas هست یا کم سواد بودن مدرس ها؟؟

    • محمدامین سعیدی راد

      سلام رضا جان. ممنونم از نظر لطفت 🙏❤
      1. بله برای Canvas هم Generator وجود داره و میتونین برای راجتی کار ازشون استفاده کنین.
      2. کاربرد Canvas تو پروژه بستگی به نوع پروژه داره. مثلا اگه بخواین یه Cms یا Dashboard Admin پیاده سازی کنین، به تعداد زیادی نمودار نیاز دارین. خب قاعدتا تو همچین پروژه‌ای خیلی میتونه بهتون کمک کنه.
      3. نمیشه گفت کم‌‌سواد بودن. اما چون تو پروژه های خاصی کاربرد داره و بدون Canvas هم میشه کار رو راه بندازیم، توجه آنچنانی بهش نمیشه متاسفانه.
      اما یه متخصص و برنامه نویس سنیور فرانت‌اند باید بلد باشه ✌❤

دیدگاه خود را بنویسید