کاربرد canvas

کاربرد canvas

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

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

کاربرد canvas کاربرد canvas کاربرد canvas canvas

کاربرد canvas

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

از تگ < canvas > در Html 5 برای طراحی اشیا و اشکال گرافیکی بصورت Run Time به کمک زبان های اسکریپتی مثل مثل جاوا اسکریپت استفاده می شود . بوسیله تگ < canvas > شما می توانید اشیای گرافیکی مثل مربع ، دایره ، تصاویر و … را بر روی صفحه ایجاد نمایید . تگ < canvas > خود به تنهایی خروجی بر روی صفحه نداشته و فقط به عنوان یک نگهدارنده برای اشیای گرافیکی استفاده می شود . عمل طراحی اشکال بوسیله جاوا اسکریپت انجام می شود .

شکل کلی استفاده از تگ  < canvas > بصورت زیر است :

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

این تگ در تمام مرورگرهای اصلی پشتیبانی می شود .

  • اگر مرورگر از تگ < canvas > پشتیبانی نکند ، متن ( Text) که درون آن وجود دارد ،  به جای شکل گرافیکی نمایش داده می شود .
  •  تگ < canvas > در Html 5 جدید است .

شتیبانی مرورگر ها از عنصر Convas

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

► مرورگر chrome  : نسخه ۴٫۰

► مرورگر FireFox : ورژن ۲٫۰

► مرورگر internet Explorer : ورژن ۹٫۰

► مرورگر Opera : نسخه ۹٫۰

► مرورگر safari : نسخه ۳٫۱

 ♦  نمونه هایی از Convas

عنصر Convas یک ناحیه مستطیلی شکل در یک صفحه HTML است که بطور پیش فرض هیچ حاشیه و محتوایی ندارد.

نشانه گذاری این عنصر بصورت زیر میباشد: 

رسم از طریق جاوااسکریپت

تگ Canvas در درون خودش امکان رسم ندارد. تمام رسم اشکال باید از طریق JavaScript صورت گیرد.

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

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

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

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

accesskey hidden itemtype
class id lang
contenteditable inert spellcheck
contextmenu itemid style
dir itemprop tabindex
draggable itemref title
dropzone itemscope translate

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

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

onabort onended onmousewheel
oncancel onerror onpause
onblur onfocus onplay
oncanplay onformchange onplaying
oncanplaythrough onforminput onprogress
onchange oninput onratechange
onclick oninvalid onreadystatechange
oncontextmenu onkeydown onscroll
ondblclick onkeypress onseeked
ondrag onkeyup onseeking
ondragend onload onselect
ondragenter onloadeddata onshow
ondragexit onloadedmetadata onstalled
ondragleave onloadstart onsubmit
ondragover onmousedown onsuspend
ondragstart onmousemove ontimeupdate
ondrop onmouseout onvolumechange
ondurationchange onmouseover onwaiting
onemptied onmouseup

عنصر SVG مربوط به HTML

تگ SVG که در HTML5 معرفی شده است، ظرفی برای گرافیک SVG است.

SVG دارای چندین متد برای رسم مسیر، جعبه، دایره، متن، و اضافه کردن تصاویر می باشد.

 برخی تفاوت های مهم  Canvas و SVG بصورت زیر میباشند:

Canvas

► رزولوشن وابسته

► بدون پشتیبانی هندلرهای ایونت

► قابلیت ارائه متن ضعیف

► شما می توانید تصویر حاصل را با فرمتهای .png یا .jpg ذخیره کنید

► بسیار مناسب برای بازی های گرافیکی فشرده

 SVG

► رزولوشن مستقل

► پشتیبانی از هندلرهای ایونت

► خیلی مناسب برای برنامه های کاربردی با نواحی ارائه بزرگ (نقشه های گوگل)

► رندر کُند اگر پیچیده باشد

► برای برنامه های بازی مناسب نیست

در مثال زیر یک تگ < canvas > را با id برابر MyCanvas ، تعریف کرده ایم . سپس به وسیله یک اسکریپت آن تگ را فراخوانی کرده و با استفاده از متدهای خاصی ، شکلی را برای آن طراحی کرده ایم .

 
خروجی به صورت زیر می باشد.
 
کاربرد canvas کاربرد canvas کاربرد canvas index

کاربرد canvas

 
آموزش HTML آموزش طراحی وب

یک نظر

  1. با سلام
    تشکر از آموزشهای خیلی خوبتون!
    لطفا اگه ممکنه آموزش اسلاید تصاویر رو هم بذارین!
    یا اینکه اگه قبلا اموزشش رو گذاشتین لینکش رو به من بدین ممنون میشم!
    اینکه چجور یه اسلاید تصاویر رو بسازیم که با زدن دکمه، تصاویر عوض بشن!

    با سپاس

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