آموزش HTML – تگ canvas

نویسنده : مرتضی گنج | تاریخ انتشار : 2019/12/25 | بخش : آموزش HTML

تگ <canvas> چیست؟

برای ترسیم اشکال گوناگون گرافیکی در HTML از تگ <canvas> استفاده می شود، که کاربردها و قابلیتهای جالب و متنوعی دارد.

تگ <canvas> از تگ های جدید در سند HTML و دارای یک تگ باز ( opening tag ) و یک تگ بسته ( closing tag ) می باشد.

تگ <canvas> به منظور رسم گرافیک های شناور که از طریق برنامه نویسی با JavaScript به کار می رود.

به عبارت دیگر تگ <canvas> به تنهایی قادر به ساخت رسم گرافیکی نیست و تنها یک ظرف یا قالبی است که گرافیک ها را در خود جای می دهد و شما باید برای رسم گرافیک ها از اسکریپت ها استفاده کنید.

تگ <canvas> از طریق اسکریبت نویسی (معمولاً JavaScript) برای رسم اشکال در یک صفحه وب استفاده می شود ، برای تگ Canvas متدهای زیادی برای رسم مستطیل، دایره، خطوط، حروف و همچنین افزودن تصاویر وجود دارد.

 

نحوه ایجاد تگ <canvas> در HTML

تگ <canvas> چندین متد برای رسم مسیر ، جعبه ، دایره ، متن ، و اضافه کردن تصاویر دارد.

تگ <canvas> یک ناحیه مستطیل شکل برای نقاشی کشیدن در صفحه HTML ایجاد می کند. بصورت پیش فرض، در تگ <canvas> لبه و محتوایی تنظیم نشده است.

همیشه در تگ <canvas> ، خصوصیت های id (برای مراجعه به آن در یک اسکریپت)، width و height را تنظیم نمایید.

می توانید چندین تگ <canvas> را در یک صفحه HTML ایجاد نمایید.

 

مثال از تگ canvas در HTML

تمرین کنید !

تمرین کنید !

 

درک مختصات Canvas

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

تگ canvas

نکات و توضیحات

تگ canvas یک تگ جدید/اضافه شده در HTML5 می باشد.

هر متنی که درون تگ canvas قرار بگیرد، در صورتی که مرورگرها از این تگ پشتیبانی نکنند آن متن به کاربر نمایش داده می شود و کاربر می تواند متوجه شود که مرورگرش از تگ canvas پشتیبانی نمی کند.

 

پشتیبانی مرورگرها برای تگ canvas در HTML

در جدول زیر می توانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ canvas در HTML پشتیبانی می کنند یا خیر.

Element
<canvas> ۴٫۰ ۲٫۰ ۹٫۰ ۳٫۱ ۹٫۰

 

جدول صفات تگ canvas در HTML

صفت  مقدار توضیحات 
height pixels برای مشخص کردن اندازه ارتفاع Canvas
width pixels برای مشخص کردن اندازه عرض Canvas