این عنصر از تکنولوژی های دیگر بهره مند است
HTML5 شامل یک عنصر هیجان انگیز به نام CANVAS است. این کاربردهای زیادی دارد، اما برای استفاده از آن باید جاوا اسکریپت، HTML و گاهی CSS را یاد بگیرید.
این باعث می شود عنصر CANVAS کمی برای طراحان دلهره آور باشد، و در واقع، اکثر این احتمالا عنصر را نادیده می گیرد تا زمانی که ابزار قابل اعتماد برای ایجاد انیمیشن ها و بازی های CANVAS وجود داشته باشد بدون دانستن جاوا اسکریپت.
کدام HTML5 Canvas مورد استفاده قرار می گیرد
عنصر HTML5 Canvas می تواند برای بسیاری از موارد استفاده شود که قبلا شما مجبورید از یک برنامه جاسازی شده مانند فلش برای تولید استفاده کنید:
- گرافیک پویا
- بازی های آنلاین و آفلاین
- تصاوير متحرك
- ویدئو تعاملی و صوتی
در واقع، دلیل اصلی این که مردم از عنصر CANVAS استفاده می کنند، این است که به راحتی تبدیل یک صفحه وب ساده به یک برنامه وب پویا و سپس تبدیل آن برنامه به یک برنامه تلفن همراه برای استفاده در گوشی های هوشمند و رایانه های لوحی است.
اگر ما فلش داشته باشیم، چرا ما نیاز داریم؟
با توجه به مشخصات HTML5، عنصر CANVAS:
"... رزولوشن Bitmap بولت، که می تواند برای ارائه گراف، گرافیک بازی، هنر، و یا دیگر تصاویر بصری بر روی پرواز استفاده می شود."عنصر CANVAS به شما اجازه می دهد تا گرافیک، گرافیک، بازی، هنر، و سایر تصاویر را مستقیما بر روی صفحه وب در زمان واقعی طراحی کنید.
شما ممکن است فکر کنید که ما می توانیم این کار را با فلش انجام دهیم، اما بین CANVAS و فلش دو تفاوت عمده وجود دارد:
- عنصر CANVAS درست در HTML جاسازی شده است. اسکریپت هایی که بر روی آن می نویسند یا در HTML یا در یک فایل خارجی مرتبط هستند. این به این معنی است که عنصر CANVAS بخشی از مدل شیء سند یا DOM است.
- فلش یک فایل خارجی جاسازی شده است. آن از عنصر EMBED یا OBJECT برای نمایش استفاده می کند و نمی تواند مستقیما با دیگر عناصر HTML ارتباط برقرار کند. از آنجا که عنصر CANVAS بخشی از DOM است، می تواند با بسیاری از روش های DOM ارتباط برقرار کند.
- برای مثال، شما ممکن است یک انیمیشن ایجاد کنید که وقتی بخش دیگری از صفحه با آن ارتباط برقرار می کند ایجاد می شود - مانند یک عنصر فرم که پر شده است. با فلش، بیشتر شما می توانید شروع به فیلم یا انیمیشن فلش کنید، اما با CANVAS شما می توانید اثرات مختلفی ایجاد کنید، حتی با اضافه کردن متن از قسمت فرم به انیمیشن.
- عنصر CANVAS بومی توسط مرورگرهای وب پشتیبانی می شود. برای اینکه کاربران در واقع از فلش استفاده کنند، مرورگر باید افزونه را نصب کند. این اغلب برای اکثر افراد ناشی از نصب فلش های قدیمی است یا این که سیستم عامل آنها به سادگی از آن پشتیبانی نمی کند.
- استفاده شده بود که هر افزونه نصب شده بود، اما این دیگر مورد نیست، و بسیاری از آنها حتی از پلاگین به علت مشکلات نیز حذف شده اند. به علاوه، حتی در پلتفرم محبوب iOS موجود نیست.
بوم مفید است حتی اگر شما هرگز برنامه فلش را استفاده نکنید
یکی از دلایل اصلی این که عنصر CANVAS بسیار گیج کننده است این است که بسیاری از طراحان به یک وبسایت کاملا ایستا تبدیل شده اند. تصاویر ممکن است متحرک باشند، اما این کار با GIF انجام می شود و البته شما می توانید ویدیو را به صفحات جلب کنید اما دوباره آن ویدیو استاتیک است که به سادگی بر روی صفحه قرار می گیرد و شاید به دلیل تعامل، شروع یا متوقف شود، اما این همه.
عنصر CANVAS به شما این امکان را می دهد که به صفحات وب خود بسیار بیشتر ارتباط برقرار کنید زیرا اکنون می توانید گرافیک، تصاویر و متن را به صورت پویا با زبان اسکریپتی کنترل کنید. عنصر CANVAS به شما کمک می کند تصاویر، عکس ها، نمودار ها و نمودار ها را به عناصر متحرک تبدیل کنید.
هنگامی که استفاده از عنصر بوم را در نظر بگیرید
مخاطبان شما باید هنگام تصمیم گیری در مورد استفاده از عنصر CANVAS برای اولین بار به شما توجه کنند.
اگر مخاطبان شما عمدتا از ویندوز XP و IE 6، 7 یا 8 استفاده می کنند، ایجاد یک ویژگی بوم پویا بی معنی است زیرا مرورگرها از آن پشتیبانی نمی کنند.
اگر شما در حال ساخت یک برنامه کاربردی هستید که تنها در دستگاه های ویندوز استفاده می شود، پس Flash ممکن است بهترین شرط بندی شما باشد. یک برنامه کاربردی که در رایانه های ویندوز و مک استفاده می شود می تواند از یک برنامه Silverlight سود ببرد.
با این حال، اگر برنامه شما باید بر روی دستگاه های تلفن همراه (هر دو آندروید و iOS) و همچنین رایانه های رومیزی مدرن (به روز شده به آخرین نسخه های مرورگر) را مشاهده کنید، سپس با استفاده از عنصر CANVAS انتخاب خوبی است.
به یاد داشته باشید که استفاده از این عنصر به شما امکان می دهد گزینه های برگشتی مانند تصاویر استاتیکی را برای مرورگرهای قدیمی که از آن حمایت نمی کنند، استفاده کنید.
با این حال، توصیه نمی شود که از همه چیز برای استفاده از HTML5 استفاده کنید. شما نباید از آن برای چیزهایی مانند لوگو، سربرگ یا ناوبری استفاده کنید (اگر چه استفاده از آن برای تحریک بخشیدن از هر یک از این موارد، مناسب خواهد بود).
با توجه به مشخصات، شما باید از عناصر مناسب برای آنچه که شما در حال تلاش برای ساخت آن هستید استفاده کنید. بنابراین استفاده از عنصر HEADER همراه با تصاویر و متن به عنصر CANVAS برای هدر و آرم شما ترجیح داده می شود.
همچنین اگر شما یک صفحه وب یا برنامه ای برای استفاده در رسانه های غیر تعاملی مثل چاپ استفاده می کنید، باید بدانید که عنصر CANVAS که به صورت پویا به روز می شود، ممکن است چاپ نکنید، همانطور که انتظار دارید. ممکن است چاپی از محتوای کنونی یا محتوای پشت سر هم دریافت کنید.