آموزش‌های کانواس HTML

عنصر <canvas> HTML برای ترسیم تصاویر در وب‌سایت استفاده می‌شود.

این تصاویر با استفاده از <canvas> ایجاد شده‌اند.

این چهار عنصر را نشان می‌دهد: مستطیل قرمز، مستطیل متمایز، مستطیل چندرنگ و متن چندرنگ.

کانواس HTML چیست؟

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

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

کانواس دارای روش‌های مختلفی برای ترسیم مسیرها، مستطیل‌ها، دایره‌ها، متن و اضافه کردن تصاویر است.

کانواس HTML می‌تواند متن را ترسیم کند

کانواس می‌تواند متن رنگی را ترسیم کند و می‌تواند دارای انیمیشن باشد.

کانواس HTML می‌تواند تصاویر گرافیکی را ترسیم کند

کانواس دارای توانایی‌های قوی برای نمایش داده‌های گرافیکی با استفاده از تصاویر و نمودارها است.

کانواس HTML می‌تواند انیمه شود

اجسام کانواس می‌توانند حرکت کنند. همه چیز ممکن است: از یک توپ پرنده ساده تا یک انیمیشن پیچیده.

کانواس HTML قابل تعامل است

کانواس HTML می‌تواند به رویدادهای JavaScript پاسخ دهد.

کانواس می‌تواند به هر عمل کاربری پاسخ دهد (کلیک کلید، کلیک ماوس، کلیک دکمه، حرکت انگشت).

کانواس HTML برای بازی‌ها قابل استفاده است

روش‌های انیمیشن کانواس برای برنامه‌های بازی HTML امکانات بسیاری ارائه می‌دهد.

مثال Canvas

در HTML، عنصر <canvas> به این شکل به نظر می‌رسد:

<canvas id="myCanvas" width="200" height="100"></canvas>

عنصر <canvas> باید ویژگی id داشته باشد تا JavaScript بتواند به آن اشاره کند.

ویژگی‌های width و height برای تعریف اندازه‌ی کانواس نیز ضروری هستند.

توضیح: می‌توان چندین عنصر <canvas> در یک صفحه‌ی HTML داشت.

به طور پیش‌فرض، عنصر <canvas> هیچ حاشیه‌ای ندارد و هیچ محتوایی ندارد.

برای افزودن حاشیه، از ویژگی style استفاده کنید:

مثال

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

به طور مستقیم امتحان کنید

در فصل‌های بعدی نحوه‌ی ترسیم روی کانواس توضیح داده خواهد شد.

لطفاً به اینجا نیز مراجعه کنید:

دستورالعمل کامل Canvas در CodeW3C.com

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

<canvas> یک عنصر استاندارد HTML5 (2014) است.

همه مرورگرهای مدرن از <canvas> پشتیبانی می‌کنند: