آموزش Canvas در HTML5

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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