طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

آموزش HTML – تگ Canvas در html


آموزش HTML - مقدمه

در جلسه قبلی آموزش HTML با input های جدید فرم ها در HTML5 آشنا شدیم. در این بخش به تگ Canvas در html خواهیم پرداخت.

تگ Canvas برای طراحی عناصر گرافیکی در صفحه وب استفاده می شود

 

Canvas چیست

تگ Canvas در html می تواند برای طراحی گرافیکی در صفحه وب با استفاده از اسکریپت نویسی (معمولا جاوااسکریپت) انجام شود.

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

حالا canvas جزیی از خصوصیات HTML5 برای نسل بعدی تکنلوژی های وب است. تگ <canvas> اخیرا توسط تمام مرورگر ها از جمله IE 9+, فایرفاکس, سافاری و اپرا پشتیبانی می شود.

بصورت پیش فرض تگ Canvas عرض ۳۰۰px و ارتفاع ۱۵۰px بدون border و محتوا را دارد به هر حال این ویژگی ها می توانند توسط CSS تغییر کنند.

 

درک مختصات Canvas

Canvas یک مستطیل دوبعدی است. مختصات گوشه بالا سمت چپ کانواس (۰, ۰) است که به عنوان مبدا شناخته می شود و پایین سمت راست نیز بصورت (canvas-width, canvas-height) مشخص می شود.

آموزش HTML - تگ Canvas در html

کشیدن راه و شکل ها در Canvas

در این بخش نگاهی می اندازیم به نحوه کشدین شکل های ساده توسط تگ Canvas در html و جاوااسکریپت.

قالب ما برای کشیدن راه و شکل ها در کانواس ۲بعدی HTML5 :

همه خط های ۷ تا ۱۱ بسیار ساده هستند. تابع window.onload مشخص می کند که برای دسترسی به المان canvas باید تا لود شدن کامل صفحه صبر کنیم.

همین که صفحه لود شد, می توانید به المان canvas با document.getElementById() دسترسی داشته باشیم.

بعد ما یک کانواس دوبعدی با پاس دادن ۲d به متد آبجکت canvas که getContext() است, شی را ایجاد می کنیم.

کشیدن یا رسم یک خط

ساده ترین مسیری که می توانید با تگ canvas در html بسازید, خط مستقیم است. برای اینکار از متدهای moveTo() , lineTo() , stroke() استفاده می کنیم.

متد moveTo() برای مشخص کردن موقعیت نشانگر داخل کانواس استفاده می شود, متد lineTo() برای مشخص کردن مختصات خط نقطه آخر و متد stroke() نیز برای نمایان کردن خط استفاده می شود.

رسم یک کمان (Arc)

برای ساخت یک کمان مثل یک لب خندان از متد arc() با سینتکس ساده زیر استفاده می کنیم:

حتما بخوانید  آموزش HTML - مقدمه

مثال :

ساخت یک مستطیل

شما می توانید یک مستطیل و مربع را با متد rect() بسازید. متد rect() نیازمند چهار پارامتر x , y موقعیت مستطیل و عرض و ارتفاع آن.

سینتکس متد rect() :

مثال :

ساخت یک دایره

متد خاصی برای ساخت دایره مثل متد rect() برای مستطیل وجود ندارد. به هر حال می توانید با یک کمان کاملا بسته شده یک دایره را با arc() بسازید.

سینتکس کلی برای ساخت یک دایره کامل :

مثال :

دادن استایل و رنگ به Stroke

رنگ پیش فرض stroke سیاه است و ضخامت آن یک پیکسل است اما می توانید این مقادیر را با StrokeStyle و lineWidth تغییر بدید.

پر کردن رنگ داخل شکل های canvas

شما می توانید رنگ داخل شکل ها را با متد fillStyle() بصورت زیر که داخل یک مستطیل را پر کردیم, لحاظ کنید

نکته: پیشنهاد می شود از متد fill() قبل از stroke() برای مرتب سازی رندر صحیح stroke استفاده کنید.

حتما بخوانید  آموزش HTML - تگ script در html

مشابه آن, از fillStyle() می توانید برای پر کردن داخل یک دایره نیز استفاده کنید.

رسم متن در canvas

تا اینجا کارهای جالبی با تگ canvas در html انجام دادیم. شما همچنین می توانید متن را داخل canvas بکشید.

این متن ها می توانند شامل هر کاراکتر یونیکدی باشند. مثال زیر یک مثال Hello World! را داخل یک کانواس قرار می دهد.

همچنین می توانید رنگ متن و تراز بندی آن را ست کنید

همچنین می توانید stroke را با متد strokeText() لحاظ کنید. این متد به جای پر کردن آن, رنگ متن را مشخص می کند. به هر حال اگر قصد دارید هر دو مقدار fill و stroke را ست کنید می توانید از fillText() و strokeText() با هم استفاده کنید.

نکته: پیشنهاد می شود که از متد fillText() قبل از متد strokeText() به منظور رندر صحیح stroke استفاده کنید.

 

امیدوارم در این بخش آموزش HTML , از تگ Canvas در html نهایت استفاده را برده باشید.

در بخش بعدی با تگ SVG آشنا می شویم.

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

موفق باشید.

اگر مفید بود, لطفا به اشترک بگذارید تا دوستان دیگر نیز بهره ببرند

حسن شفیعی
مدرس ، پنتستر ، توسعه دهنده اپلیکیشن های تحت وب ، عضو مرکز حامی نخبگان و از مدیران و اعضای رسمی تیم امنیتی آشیانه هستم . علاقه خاصی به زبان php و امنیت شبکه و لینوکس دارم و هر روز تلاش می کنم به این حوزه ها مسلط تر شوم و اطلاعاتم را در وب به اشتراک بگذارم

دیدگاه کاربران

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

آموزش طراحی وب سایت

نظر کاربران عزیز

آموزش های آنلاین در چه زمینه ای تهیه کنیم ؟

  • آموزش جاوااسکریپت و جی کوئری (45%, 10)
  • آموزش ساخت ربات تلگرام (45%, 10)
  • آموزش بوت استرپ 4 (9%, 2)

تعداد رای ها : 22

Loading ... Loading ...

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما


logo-samandehi نماد اعتماد الکترونیک

دانلود کتاب

عضویت در خبرنامه