آموزش 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 استفاده کنید.

 

لینک دانلود