آموزش HTML – تگ canvas

تگ <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 یک تگ جدید/اضافه شده در HTML5 می باشد.

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

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

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

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

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