در این بخش می خوانید:
- HTML Canvas چیست؟
- Canvas API
- کاربرد HTML5 Canvas
- اگر به Flash دسترسی داریم، چرا به Canvas نیاز داریم؟
- چه زمانی استفاده از عنصر Canvas را در نظر بگیرید؟
HTML Canvas چیست؟
عنصر <HTML <canvas برای ترسیم graphics بر روی fly از طریق JavaScript استفاده می شود. عنصر <canvas> فقط یک کانتینر برای graphics است. شما باید از جاوا اسکریپت برای رسم graphics استفاده کنید. دارای چندین متد برای رسم مسیرها، boxes ، circles ، متن ها و اضافه کردن تصاویر است. یک canvas یک منطقه مستطیلی در یک صفحه HTML است. به طور پیشفرض یک canvas دارای مرز و محتوا نیست.
عنصر canvas> HTML> برای ترسیم گرافیک در یک صفحه وب استفاده می شود. گرافیک سمت چپ با <canvas> ایجاد می شود. چهار عنصر را نشان می دهد: یک مستطیل قرمز، یک مستطیل گرادیانت، یک مستطیل چند رنگ و یک متن چند رنگ.
Canvas API
Canvas API وسیله ای برای ترسیم گرافیک از طریق جاوا اسکریپت و عنصر canvas> HTML> فراهم می کند. در میان چیزهای دیگر، می توان از آن برای انیمیشن، گرافیک بازی، مصورسازی داده ها، دستکاری عکس و پردازش ویدئوی بلادرنگ استفاده کرد.
Canvas API تا حد زیادی بر روی گرافیک دو بعدی تمرکز دارد. WebGL API که از عنصر <canvas> نیز استفاده میکند، گرافیکهای دوبعدی و سه بعدی را با شتاب سختافزاری ترسیم میکند.
این مثال ساده یک مستطیل سبز را روی Canvas می کشد.
HTML
<canvas id="canvas"></canvas>
کاربرد HTML5 Canvas
HTML5 شامل یک عنصر هیجان انگیز به نام CANVAS است. کاربردهای زیادی دارد، اما برای استفاده از آن، باید مقداری جاوا اسکریپت، HTML و گاهی اوقات CSS یاد بگیرید.
عنصر HTML5 CANVAS را می توان برای بسیاری از موارد استفاده کرد که قبلاً برای ایجاد آنها مجبور بودید از یک برنامه جاسازی شده مانند Flash استفاده کنید:
- گرافیک پویا
- بازی های آنلاین و آفلاین
- انیمیشن
- ویدئو و صدای تعاملی
در واقع، دلیل اصلی استفاده مردم از عنصر CANVAS به این دلیل است که تبدیل یک صفحه وب ساده به یک وب اپلیکیشن پویا و سپس تبدیل آن اپلیکیشن به یک اپلیکیشن تلفن همراه برای استفاده در تلفن های هوشمند و تبلت ها آسان است.
اگر به Flash دسترسی داریم، چرا به Canvas نیاز داریم؟
طبق مشخصات HTML5، عنصر CANVAS عبارت است از: "... یک CANVAS بیت مپ وابسته به رزولوشن، که می تواند برای رندر کردن نمودارها، گرافیک بازی، هنر یا سایر تصاویر بصری در fly استفاده شود." عنصر CANVAS به شما امکان میدهد نمودارها، گرافیکها، بازیها، هنر و سایر تصاویر را مستقیماً در صفحه وب به صورت بلادرنگ بکشید. ممکن است فکر کنید که ما میتوانیم این کار را با Flash انجام دهیم، اما دو تفاوت عمده بین CANVAS و Flash وجود دارد:
1.عنصر CANVAS درست در HTML جاسازی شده است. اسکریپت هایی که بر روی آن طراحی می شوند یا در HTML یا در یک فایل خارجی لینک شده هستند. این بدان معناست که عنصر CANVAS بخشی از مدل شیء سند (DOM) است.
Flash یک فایل خارجی تعبیه شده است. از عنصر EMBED یا OBJECT برای نمایش استفاده می کند و نمی تواند مستقیماً با سایر عناصر HTML تعامل داشته باشد. از آنجایی که عنصر CANVAS بخشی از DOM است، می تواند به طرق مختلف با DOM تعامل داشته باشد.
به عنوان مثال، ممکن است انیمیشنی بسازید که با تعامل با بخش دیگری از صفحه تغییر کند - مانند یک عنصر فرم که پر می شود. با Flash، بیشترین کاری که می توانید انجام دهید این است که فیلم یا انیمیشن Flash را شروع کنید، اما با CANVAS، شما می توانید بسیاری از افکت های مختلف ایجاد کنید، حتی متن را از قسمت فرم به انیمیشن اضافه کنید.
2.عنصر CANVAS به طور نیتیو توسط مرورگرهای وب پشتیبانی می شود. برای اینکه کاربران واقعاً از Flash استفاده کنند، باید بر روی مرورگر خود افزونه را نصب کرده باشند. این امر اغلب برای اکثر مردم به دلیل نصب نسخه قدیمی Flash یا این واقعیت که سیستم عامل آنها به سادگی از آن پشتیبانی نمی کند، دردسرساز است.
قبلاً بر روی همه مرورگرها این افزونه را نصب می کردند، اما دیگر اینطور نیست و حتی بسیاری به دلیل مشکلاتی افزونه را حذف می کنند. به علاوه، حتی در پلتفرم محبوب iOS نیز در دسترس نیست.
Canvas مفید است حتی اگر شما هرگز قصد استفاده از فلش را نداشته باشید
یکی از دلایل اصلی گیج کننده بودن عنصر CANVAS این است که بسیاری از طراحان به یک وب کاملا ثابت عادت کرده اند. ممکن است تصاویر متحرک باشند، اما این کار با GIF انجام میشود، و البته، میتوانید ویدیو را در صفحات جاسازی کنید، اما دوباره، این یک ویدئوی ثابت خواهد بود که به سادگی روی صفحه مینشیند و ممکن است به دلیل تعامل پخش یا متوقف شود.
عنصر CANVAS به شما امکان می دهد تعامل بسیار بیشتری را به صفحات وب خود اضافه کنید زیرا اکنون می توانید گرافیک ها، تصاویر و متن را به صورت پویا با یک زبان برنامه نویسی کنترل کنید. عنصر CANVAS به شما کمک می کند تا تصاویر، عکس ها، نمودارها و گراف ها را به عناصر متحرک تبدیل کنید.
چه زمانی استفاده از عنصر Canvas را در نظر بگیرید؟
هنگام تصمیم گیری در مورد استفاده از عنصر CANVAS، مخاطب شما باید اولین نکته مورد توجه شما باشد.
اگر مخاطبان شما در درجه اول از ویندوز 7 یا 8 استفاده می کنند، ایجاد یک ویژگی CANVAS پویا بی معنی خواهد بود زیرا این مرورگرها از آن پشتیبانی نمی کنند.
اگر برنامهای میسازید که فقط در دستگاههای ویندوز استفاده میشود، Flash ممکن است بهترین گزینه برای شما باشد. برنامهای که در رایانههای Windows و Mac استفاده میشود میتواند از برنامه Silverlight بهرهمند شود.
با این حال، اگر برنامه شما باید در دستگاه های تلفن همراه (هم اندروید و هم iOS) و همچنین رایانه های رومیزی مدرن (به روز رسانی به آخرین نسخه مرورگر) مشاهده شود، استفاده از عنصر CANVAS انتخاب خوبی است.
به خاطر داشته باشید که استفاده از این عنصر به شما امکان می دهد گزینه های بازگشتی مانند تصاویر استاتیک برای مرورگرهای قدیمی که از آن پشتیبانی نمی کنند داشته باشید.
با این حال، استفاده از CANVAS HTML5 برای همه چیز توصیه نمی شود. شما هرگز نباید از آن برای مواردی مانند لوگو، هدلاین یا ناوبری خود استفاده کنید (اگرچه استفاده از آن برای متحرک سازی بخشی از هر یک از این موارد خوب است).
با توجه به این مشخصات، باید از عناصری استفاده کنید که برای چیزی که میخواهید بسازید مناسبتر هستند. بنابراین استفاده از عنصر HEADER همراه با تصاویر و متن به عنصر CANVAS برای هدر و لوگوی شما ارجحیت دارد.
همچنین، اگر صفحه وب یا برنامهای ایجاد میکنید که قرار است در یک رسانه غیر تعاملی مانند چاپ استفاده شود، باید توجه داشته باشید که عنصر CANVAS که بهصورت پویا بهروزرسانی شده است ممکن است آنطور که انتظار دارید چاپ نشود. ممکن است چاپی از محتوای فعلی یا محتوای بازگشتی دریافت کنید.