آموزش Canvas در HTML5

  • مدرس : علی مظلوم
  • سطح آموزش : متوسط
  • مدت : ۵۴ دقیقه
  • تعداد دانشجو : ۱۳۳۰

آموزش Canvas در HTML5 کاملا رایگان!

 

با یک آموزش دیگه تحت عنوان آموزش جامع 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 از صفرِ صفر و روان!

آموزش جامع HTML5 بسیار روان و کاربردی

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

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

دورس Canvas در HTML5

  • 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

  • برای مشاهده نظرات و سوالات، بر روی دکمه مربوطه کلیک کنید
  • ارتباط سریع و موثر با مدرس دوره
  • امکان ارسال فایل های پروژه
  • پاسخگویی متنی، صوتی و تصویری به سوالات شما