آموزش HTML5 Canvas

یکی از مهم ترین ابزارهای یک نقاش بوم نقاشی او می‌باشد. این به او این آزادی را می‌دهد تا همه نوع احساس و بیان و ایده را بر روی آن به نحوی که دوست دارد نمایش دهد. این آزادی به وسیله دو چیز محدود می‌شود: سطح مهارت و تصویر سازی او.

این موقعیت را در دنیای توسعه وب هم به طور مشابه داریم. با پیشرفت HTML5 و خصوصیات قدرتمندش ، توسعه دهندگان وب به توانایی‌هایی دسترسی پیدا کردند که در گذشته غیر ممکن بود. رسم گرافیک و ایجاد انیمیشین مستقیما در جستجوگر اینترنت به طور کامل ممکن شد با کمک HTML5 Canvas.

 

HTML5 Canvas چیست ؟

این API بوسیله نوشتن کدهای جاوا اسکریپ که می‌توانند ناحیه کاناواس را دسترسی داشته باشند. این دسترسی شامل یک مجموعه کامل از توابع رسم می‌باشد ک‌هاجازه تولید گرافیک دینامیک را می‌دهند.

 

چه کاربردهایی می‌توان با HTML5 Canvas ایجاد کرد ؟

بازی سازی : شما می‌توانید بازی‌های دوبعدی و سه بعدی بسازید.

تبلیغات : شما می‌توانید بنر و تبلیغات دینامیک بر مبنای فلش ایجاد کنید تا توجه مخاطب بیشتر جلب شود.

بیان داده : HTML5 می‌تواند داده را از منابع داده عمومی‌جمع آوری کند و از آنها استفاده کند تا چارت‌ها و گرافهای واکنش گرا تولید کند.

آموزش و یادگیری : HTML5 Canvas را میتوان برای تولید محتوی ترکیبی ویدئو و صوت و تصویرو متن جهت آموزش هم استفاده کرد.

هنر و تزیین : با استفاده از خلاقیت و ابزارهای در دسترس در اینجا می‌توان خروجی‌های هنری زیبایی تولید کرد.

 

زمینه بارگذاری کانواس

هر المان کانواس HTML5 می‌بایست یک زمینه باشد. زمینه مشخص می‌کند که   از چه HTML5 Canvas API  استفاده شود. زمینه 2 بعدی برای رسم نمودارهای دو بعدی و دستکاری تصویر‌های bitmap استفاده می‌شود. زمینه سه بعدی برای نمودارهای سه بعدی (ایجاد و دستکاری) استفاده می‌شود. این مفهوم به نام WebGL و OpenGL ES شناخته می‌شود.

 

شروع :

برای شروع با کانواس شما به یک ویرایشگر کد و یک مرورگراینترنت نیاز دارید. من از گوگل کروم و Textpad استفاده می‌کنم اما شما هر کدام دیگر را خواستید می‌توانید استفاده کنید.

اولین کد HTML ما به صورت زیر است :


<canvas id="exampleCanvas" width="500" height="300">
  <!-- OPTION 1: leave a message here if browser doesn't support canvas -->
    <p>Your browser doesn’t currently support HTML5 Canvas.
    Please check caniuse.com/#feat=canvas for information on
    browser support for canvas.</p>
  <!-- OPTION 2: put fallback content (text, image, Flash, etc.)
                 if the browser doesn't support canvas -->
</canvas>

و کد جاوا اسکریپ ما به صورت زیر است :

var canvas = document.getElementById('exampleCanvas'),
    context = canvas.getContext('2d');
    // code examples will continue here...


به صورت پیش فرض ، مرورگر المان‌های کانواس را با عرض 300 پیکسل عرض و 150 پیکسل ارتفاع ایجاد می‌کند. شما می‌توانید اندازه عرض و ارتفاع را تغییر دهید.

نکته بعدی این است که ما به ویژگی کانواس خود یک id دادیم تا در کد جاواسکریپ خود از آن استفاده کنیم. در نهایت ، شما می‌توانید از طریق کد CSS به اطراف کانواس خود قاب اضافه کنید تا بیشتر نمایان شود.

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

جاوا اسکریپ با دو خط شروع می‌شود. در خط ابتدا، ما یک متغییر ایجاد می‌کنیم که المان کانواسمون را با   id  اش در بر بگیرد. خط دوم یک متغییر (context) ایجاد می‌کند که به محتوی 2 بعدی کانواس توسط تابع getContext() ارجاع می‌دهد . ما از متغییر context  برای دسترسی به تمامی‌تابع‌های طراحی کانواس و خصوصیات آن استفاده می‌کنیم.

با کانواس خودمون می‌توانیم شروع به کار با API آن هم بکنیم. اما قبلش بهتر است با تعدادی از مفاهیم کانواس بیشتر آشنا شویم.

اندازه المان و اندازه سطح رسم HTML5 Canvas :

بعلاوه اندازه و ارتفاع المان‌های کانواس ، شما همچنین می‌توانید از CSS برای تنظیم اندازه المان کانواس استفاده کنید.

هرچند، همانطور که می‌دانید تنظیم اندازه در CSS یا کانواس با هم متفاوت است. این به این دلیل است که کانواس دقیقا دو اندازه دارد : اندازه المان و اندازه سطح رسم المان. ولی در CSS شما به تنظیم سطح رسم المان دسترسی ندارید.

اگر اندازه المان با اندازه سطح رسم جور نباشد، مرورگر اینترنت سطح رسم را به اندازه المان fit می‌کند.

به همین خاطر بهتر است از ویژگیهای کانواس برای تنظیم المان‌ها به جای CSS استفاده کنید.

 

لینک دانلود

پیام بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

6 + one =