آموزش Canvas در HTML5

  • مدرس : علی مظلوم
  • سطح آموزش : متوسط
  • مدت : 54 دقیقه
  • تعداد دانشجو : 2550


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

استفاده از canvas نه تنهاسرعت بارگذاری رو افزایش ميده بلكه با اين روش ميشه همه نوع تصاوير و اشكال رو برای هر قسمت ازصفحه كه نياز داشته باشيد طراحی كنيد. از مزايای اين روش ، سه بعدی كردن و عمق دادن به اشكال هست . روش طراحی هم به زبان javascript‏ هست و canvas صرفا به عنوان یک نگهدارنده عمل می کند.

در این دوره ۳ پروژه عملی و کاربردی برای عنصر canvas خواهیم داشت از جمله از آنها طراحی چارت و طراحی متن های جلوه دار و طراحی لودینگ وب سایت است

سرفصل های دوره آموزشی فارسی Canvas

  • ۱ – معرفی Canvas و کاربردهای آن در وب و بازی سازی
  • ۲ – آشنایی با شی getContext و متدهای MoveTo , lineTo , Stroke برای طراحی خطوط در Canvas
  • ۳ – آشنایی با متدهای beginPath , closePath برای طراحی مسیر
  • ۴ – آشنایی با متدهای rect , arc , bezierCurveTo , quadraticCurveTo , isPointInPath() برای طراحی اشکال دایره و مستطیل
  • ۵ – آشنایی با متدهای Transformations از جمله scale , rotate , translate , transform , setTransform
  • ۶ – آشنایی با متدهای Image Drawing از جمله drawImage
  • ۷ – آشنایی با متد  globalAlpha Compositing , globalCompositeOperation
  • ۸ – طراحی پروژه چارت ساختاری
  • ۹ – طراحی پروژه لودینگ وب سایت
  • ۱۰ – طراحی متن انیمیشن

پیش نیازهای این دوره چی هست؟

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

شما حتما باید به HTML , CSS تسلط کافی و به جاوا اسکریپت تسلط نسبی داشته باشید

  • 1- آشنایی با Canvas و کابردهای آن

    5 دقیقه

    تگ <canvas> به عنوان یک نگهدارنده به همراه جاوااسکریپت برای رسم اشکال دو بعدی در یک صفحه وب استفاده میشه .

    استفاده از canvas نه تنهاسرعت بارگزاری رو افزایش ميده بلكه با اين روش ميشه همه نوع تصاوير و اشكال رو برای هر قسمت ازصفحه كه نياز داشته باشيد راطراحی كنيد. از مزايای اين روش ، سه بعدی كردن و عمق دادن به اشكال هست . روش طراحی هم به زبان javascript‏ هست و canvas صرفا به عنوان یک نگهدارنده عمل می کنه .

  • 2- پشتیبانی مرورگرها از Canvas

    3 دقیقه

    canvas رو همه مرورگرهای به روز پشتیبانی میکنن غیر از IE10 به قبل . حتی htmlshiv که برخی از تگ های HTML5 رو به IE8 معرفی میکرد کاربردی برای canvas نداره .

  • 3 دقیقه

    شیئ getContext جزئی از HTML5 هست که متدهای زیادی رو برای رسم اشکال دو بعدی در اختیار ما قرار می ده . یکی از مهمترین متدهای getContext در جاوااسکریپت متد arc هست که برای طراحی دایره و چارت های مختلف کاربرد بسیار زیادی داره .

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

     

  • 4 دقیقه

    از طریق متدهای moveTo , lineTo , stroke ما میتونیم خطوط مختلفی رو رسم کنیم .

    متد moveTo موقعیت شروع خط رو مشخص میکنه .

    متد lineTo خط رو رسم می کنه .

    متد stroke هم ، خط رو در مرورگر نمایش میده . اگر متد stroke نباشه ، خط در مرورگر نمایش داده نمیشه .

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

  • 5 دقیقه

    یکی دیگر از مهمترین متدهای getContext متد rect هست که برای طراحی اشکال مربع و مستطیل استفاده می شه ، که شامل ۴ مقدار ورودی هست .

    مقدار ورودی اول ، موقعیت افقی و مقدار ورودی دوم ، موقعیت عمودی شکل در canvas هستن .

    مقدار ورودی سوم و چهارم هم به ترتیب عرض و ارتفاع هستن .

    دقت داشته باشین که برای نمایش متد rect در مرورگر ، حتما از متد fill استفاده کنین . متد stroke برای نمایش متد rect در مرورگر کاربردی نداره .

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

  • 4 دقیقه

    از طریق متد beginPath میتونیم بیشتر از یک شکل رو در مرورگر رسم کنیم . همچنین اگه دو خط با زاویه مختلف داشته باشیم ، میتونیم از طریق متد closePath خط سوم رو مستقیما به دو خط وصل کنیم و دیگه نیازی به نوشتن lineTo سوم نیست .

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

  • 3 دقیقه

    در صورتی که ما دو شکل مختلف در canvas داشته باشیم و بین این دو شکل طراحی شده از متد clip استفاده کنیم ، شکل دوم در داخل شکل اول قرار میگیره و همچنین ریسایز می شه . از حیث css یه جورایی شبیه به بحث position : relative , position : absolute هست .

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

  • 4 دقیقه

    یکی از مهمترین متدهای شی getContext متد arc برای طراحی دایره هست که شامل ۶ مقدار ورودی هست.

    ورودی اول : موقعیت افقی دایره در canvas

    ورودی دوم :‌ موقعیت عمودی دایره در canvas

    ورودی سوم : قطر دایره

    ورودی چهارم : شروع نقطه ای دایره که صفر آن ساعت ۳ هست و به صورت ساعت گرد دایره رسم می شه .

    ورودی پنجم : نقطه پایانی دایره هست که اگر ما بخوایم دایره کاملی رسم بشه ، نقطه شروع رو ۰ و نقطه پایانی رو 2*Math.PI قرار میدهیم.

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

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

  • 12 دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

  • 7 دقیقه

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

نظرات دوره آموزش مجازی Canvas در HTML5

  • برای مشاهده نظرات و سوالات، بر روی دکمه مربوطه کلیک کنید
  • قابلیت ارسال نظرات به صورت متنی، صوتی، تصویری
2.6K
0
افکار شما را دوست دارم، لطفا نظر دهیدx