مرجع عناصر HTML : عنصر <canvas>

از عنصر <canvas> در HTML به همراه API اسکریپت‌نویسی canvas یا API WebGL برای رسم گرافیک و انیمیشن استفاده کنید.

ویژگی‌ها

ویژگی‌های این عنصر شامل ویژگی‌های سراسری است. height ارتفاع فضای مختصات بر حسب پیکسل‌های CSS. مقدار پیش‌فرض ۱۵۰ است. moz-opaque (منسوخ) به بوم اطلاع می‌دهد که آیا شفافیت یک عامل خواهد بود یا خیر. اگر بوم بداند که شفافیتی وجود ندارد، عملکرد نقاشی می‌تواند بهینه شود. این فقط توسط مرورگرهای مبتنی بر موزیلا پشتیبانی می‌شود؛ به جای آن از استاندارد استفاده کنید. width عرض فضای مختصات بر حسب پیکسل‌های CSS. مقدار پیش‌فرض ۳۰۰ است.

محتوای جایگزین

شما باید محتوای جایگزین را درون بلوک ارائه دهید. این محتوا هم در مرورگرهای قدیمی‌تر که از canvas پشتیبانی نمی‌کنند و هم در مرورگرهایی که جاوا اسکریپت غیرفعال است، رندر می‌شود.

تگ پایانی <canvas>

برخلاف عنصر ، عنصر به تگ پایانی () نیاز دارد.

اندازه‌گذاری canvas با استفاده از CSS در مقابل HTML

اندازه نمایش داده شده بوم را می‌توان با استفاده از CSS تغییر داد، اما اگر این کار را انجام دهید، تصویر در حین رندر شدن برای تناسب با اندازه استایل‌بندی شده، مقیاس‌بندی می‌شود که می‌تواند باعث شود رندر گرافیکی نهایی دچار اعوجاج شود. بهتر است ابعاد بوم خود را با تنظیم ویژگی‌های عرض و ارتفاع مستقیماً روی عناصر ، یا مستقیماً در HTML یا با استفاده از جاوا اسکریپت، مشخص کنید.

حداکثر اندازه canvas

حداکثر اندازه دقیق یک عنصر به مرورگر و محیط بستگی دارد. در حالی که در بیشتر موارد حداکثر ابعاد از 10000 در 10000 پیکسل فراتر می‌رود، دستگاه‌های iOS به ویژه اندازه بوم را به تنها 4096 در 4096 پیکسل محدود می‌کنند. محدودیت‌های اندازه بوم را در مرورگرها و دستگاه‌های مختلف مشاهده کنید. تجاوز از حداکثر ابعاد یا مساحت، بوم را غیرقابل استفاده می‌کند - دستورات طراحی کار نخواهند کرد.

استفاده از canvas خارج از صفحه

یک بوم نقاشی را می‌توان با استفاده از OffscreenCanvas API رندر کرد، که در آن سند و بوم نقاشی از هم جدا هستند. مزیت این کار این است که یک thread کارگر می‌تواند رندر بوم نقاشی را مدیریت کند و thread اصلی برنامه وب شما توسط عملیات بوم نقاشی مسدود نمی‌شود. با موازی‌سازی کار، سایر عناصر رابط کاربری برنامه وب شما حتی اگر گرافیک‌های پیچیده را روی یک بوم نقاشی خارج از صفحه اجرا کنید، پاسخگو باقی می‌مانند. برای اطلاعات بیشتر، به مستندات OffscreenCanvas API مراجعه کنید.

دسترسی پذیری:‌ محتوای جایگزین

عنصر به خودی خود فقط یک بیت‌مپ است و اطلاعاتی در مورد هیچ شیء ترسیم‌شده‌ای ارائه نمی‌دهد. محتوای Canvas مانند HTML معنایی در معرض ابزارهای دسترسی‌پذیری قرار نمی‌گیرد. به طور کلی، باید از استفاده از canvas در یک وب‌سایت یا برنامه‌ی قابل دسترس خودداری کنید. راهنماهای زیر می‌توانند به افزایش دسترسی‌پذیری آن کمک کنند. موارد استفاده از قابلیت دسترسی‌پذیری Canvas مشکلات دسترسی‌پذیری عنصر Canvas بهترین شیوه‌ها برای عناصر تعاملی Canvas

مثال

این قطعه کد یک عنصر canvas را به سند HTML شما اضافه می‌کند. اگر مرورگر قادر به خواندن یا رندر کردن canvas نباشد، یک متن جایگزین ارائه می‌شود.

HTML

سپس در کد جاوا اسکریپت، HTMLCanvasElement.getContext() را فراخوانی کنید تا یک زمینه ترسیم دریافت کنید و شروع به ترسیم روی بوم کنید:

JAVASCRIPT

مشخصه	توضیحات
دسته بندی محتوا	Flow content, phrasing content, embedded content, palpable content.
محتوای مجاز	شفاف اما بدون هیچ محتوای تعاملی به جز عناصر <a>، عناصر <button>، عناصر <input> که نوع ویژگی آنها checkbox، radio یا button است.
حذف برچسب	هیچکدام، هر دو تگ شروع و پایان اجباری هستند.
والدین مجاز	هر عنصری که محتوای جمله‌بندی‌شده را بپذیرد.
نقش ضمنی ARIA	بدون نقش متناظر
نقش‌های مجاز ARIA	Any
رابط DOM	HTMLCanvasElement