تگ canvas و کاربرد آن در HTML

تگ canvas و کاربرد آن در HTML

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

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

متن فوق را در یک ادیتور مانند notepad کپی کرده و آن را با پسوند html ذخیره کنید . با کلیک بر روی فایل ایجاد شده ، میتوانید نتیجه کدهای نوشته شده در فایل را در مروگر مشاهده کنید:

تگ canvas و کاربرد آن در HTML

تگ canvas و کاربرد آن در HTML

این تصویر در مرورگری نشان داده خواهد شد که از تگ canvas پشتیبانی کند، در غیر اینصورت متن زیر را مشاهده خواهید کرد :

Your browser does not support the HTML5 canvas tag

تگ canvas و کاربرد آن در HTML

تگ canvas و کاربرد آن در HTML

تگ canvas و کاربرد آن در HTML

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

 تفاوت بین HTML 4.01 و HTML5

عنصر <canvas> یک تگ جدید در HTML5 است.

خاصیت ها

تگ HTML می تواند شامل یک یا چند خاصیت باشد که چگونگی ارائه در مرورگر را تعیین میکنند. خاصیت ها دارای یک نام و یک مقدار هستند که با علامت (=) از هم جدا شده اند. مقدار خاصیت با علامت نقل قول احاطه میشود .

۳ نوع خاصیت وجود دارد که شما می توانید به تگ های HTML خود اضافه کنید:

خاصیت ویژه عنصر

خاصیت عمومی

خاصیت رویداد

خاصیت ویژه عنصر

خاصیت هامقدارتوضیحات
heightpixelsارتفاع canvas را مشخص میکند
widthpixelsعرض canvas را مشخص میکند

خاصیت های عمومی

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

accesskeyhiddenitemtype
classidlang
contenteditableinertspellcheck
contextmenuitemidstyle
diritemproptabindex
draggableitemreftitle
dropzoneitemscopetranslate

خاصیت های رویداد

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

onabortonendedonmousewheel
oncancelonerroronpause
onbluronfocusonplay
oncanplayonformchangeonplaying
oncanplaythroughonforminputonprogress
onchangeoninputonratechange
onclickoninvalidonreadystatechange
oncontextmenuonkeydownonscroll
ondblclickonkeypressonseeked
ondragonkeyuponseeking
ondragendonloadonselect
ondragenteronloadeddataonshow
ondragexitonloadedmetadataonstalled
ondragleaveonloadstartonsubmit
ondragoveronmousedownonsuspend
ondragstartonmousemoveontimeupdate
ondroponmouseoutonvolumechange
ondurationchangeonmouseoveronwaiting
onemptiedonmouseup

پشتیبانی از مرورگر ها

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

عنصرگوگل کروماینترنت اکسپلوررفایرفاکسسافاریاپرا
<canvas>۴٫۰۹٫۰۲٫۰۳٫۱۹٫۰
پاسخ به کلیه سوالات شما در زمینه وب هاستینگ و مدیریت سرور در انجمن کامپایلر

پاسخ دهید

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