معرفی و کاربرد تگ canvas در HTML

معرفی و کاربرد تگ canvas در HTML | کاربرد تگ <canvas> در HTML

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

تگ <canvas> در HTML

معرفی و کاربرد تگ canvas در HTML

معرفی و کاربرد تگ canvas در HTML | معرفی و کاربرد تگ canvas در HTML | معرفی و کاربرد تگ canvas در HTML | معرفی و کاربرد تگ canvas در HTML

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

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

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

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

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

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

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

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

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

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

برای اضافه کردن لبه به تگ <canvas>، از خصوصیت style استفاده نمایید:

به مثال زیر توجه کنید:

رسم کردن داخل تگ <canvas> با JavaScript

معرفی و کاربرد تگ canvas در HTML

معرفی و کاربرد تگ canvas در HTML | معرفی و کاربرد تگ canvas در HTML | معرفی و کاربرد تگ canvas در HTML | معرفی و کاربرد تگ canvas در HTML

تمام کارهای گرافیکی در تگ <canvas> توسط JavaScript انجام می شود:

 به مثال کدنویسی شده زیر درون تگ script توجه کنید:
در خط اول کد این مثال ابتدا تگ <canvas> را از طریق id در سند html با جاوااسکریپت پیدا کرده ایم:

سپس متد ()getContext را از طریق جاوااسکریپت صدا می زنیم (باید آن را با پارامتر رشته ای “۲d” تنظیم نماییم):

شیء ()getContext یکی از اشیاء توکار HTML5 است، که دارای خصوصیات و متدهای برای رسم مسیرها، جعبه، دایره، متن، عکس و … است.

دو خط بعدی، یک مستطیل قرمز رنگ رسم می کند:

خصوصیت fillStyle را می توان با یک رنگ، یک طیف ( gradient ) و یا یک الگو مقدار دهی نمود.

مقدار پیشفرض fillStyle ، رنگ سیاه یعنی “۰۰۰۰۰۰#” است.

متد ()fillRect یک مستطیل رسم می کند و آن را با مقداری که برای خصوصیت fillStyle تنظیم کرده ایم، پر می کند.

مختصات در <canvas>

تگ <canvas> یک شبکه دوبعدی است.

مختصات گوشه ی سمت چپ-بالا (۰,۰) است.

چهار پارامتر متد (۰,۰,۱۵۰,۷۵)fillRect که در مثال بالا استفاده شد به صورت زیر خواهد بود:

  • پارامتر اول(x): فاصله از چپ نسبت به محور x
  • پارامتر دوم(y): فاصله از بالا نسبت به محور y
  • پارامتر سوم(width): عرض مستطیل، یا فاصله از موقعیت x
  • پارامتر چهارم(height): ارتفاع مستطیل، یا فاصله از موقعیت y

بنابراین با شروع از گوشه سمت چپ-بالا (۰,۰) یک مستطیل ۱۵۰x75 رسم می شود.

بررسی تگ <canvas> در HTML4.0.1 و HTML5

معرفی و کاربرد تگ canvas در HTML

معرفی و کاربرد تگ canvas در HTML | معرفی و کاربرد تگ canvas در HTML | معرفی و کاربرد تگ canvas در HTML | معرفی و کاربرد تگ canvas در HTML

تگ <canvas> در HTML4.0.1 و نسخه های قدیمی تر پشتیبانی نمی شود.

تگ <canvas> یک تگ جدید در HTML می باشد و تنها در آخرین نسخه آن یعنی HTML5 پشتیبانی می شود.

ویژگی های خصوصی تگ <canvas> در HTML

دارای دو خصوصیت جدید به نام های width و height در HTML5 می باشد، که به ترتیب مشخص کننده عرض و ارتفاع تگ <canvas> می باشد.

ویژگی های عمومی تگ <canvas> در HTML

تگ <canvas> از کلیه خاصیت های عمومی در HTML پشتیبانی می کند.

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

اولین نسخه های مرورگرهای معتبری که بطور کامل از این عنصر پشتیبانی کرده اند، بصورت زیر می باشد:

  • مرورگر chrome  : نسخه ۴.۰
  •  مرورگر FireFox : ورژن ۲.۰
  •  مرورگر internet Explorer : ورژن ۹.۰
  •  مرورگر Opera : نسخه ۹.۰
  •  مرورگر safari : نسخه ۳.۱
معرفی و کاربرد تگ canvas در HTML

معرفی و کاربرد تگ canvas در HTML | معرفی و کاربرد تگ canvas در HTML | معرفی و کاربرد تگ canvas در HTML | معرفی و کاربرد تگ canvas در HTML

معرفی و کاربرد تگ canvas در HTML – اختصاصی سایت آموزی

توسط | ۱۳۹۷/۵/۱۸ ،۲۲:۲۱:۵۶ +۰۰:۰۰ مرداد ۱۸ام, ۱۳۹۷|html دسته بندی ها|برچسب ها: , , , , , , |بدون دیدگاه

در باره نویسنده :

ثبت ديدگاه

شش + پنج =