آرشا پرداز - Canvas
جزئیات مقاله
Canvas
34
0
محمد

Canvas

  • چهار شنبه 24 خرداد 1396
  • محمد دهقانیان (کارشناس شبکه)
  • 2رأی

 

درباره Canvas

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

Canvas در زبان فارسی به معنای بوم نقاشی است این عنصر تنها یک ظرف برای گرافیک است و از یک‌زبان اسکریپتی (معمولاً جاوا‌اسکریپت) برای رسم اشکال استفاده می‌شود. قدرت واقعی این المنت به دلیل رابط کاربردی برنامه‌نویسی (API) قدرتمند آن است. با Canvas API دیگر به تصاویر چهارگوش و ساده محدود نیستید و می‌توانید با کمک جاوا اسکریپت، هر چیزی را رسم کنید. با این قابلیت نیازی به دانلود تصاویر از سرور نیست بنابراین سرعت بارگذاری صفحه را بالا می‌برد. این المنت متدهای گوناگونی برای رسم مسیرها، جعبه‌ها، دایره‌ها، کاراکترها و درج تصاویر در اختیار شما قرار می‌دهد.

Canvas اولین بار در سال 2004 توسط کمپانی Apple معرفی شد و در بعضی از محصولاتش ازجمله Dashboard و Safari از آن استفاده کرد و درنهایت هم استانداردی برای آن تدوین شد تا همه مرورگرها این المنت را درون خود پیاده‌سازی و قابل‌اجرا کنند.

استفاده از بسیار آسان است و برای استفاده از آن باید با مفاهیم ابتدایی HTML و JavaScript آشنایی داشته باشید. این المنت را می‌توانید در body به کدهای خود اضافه کنید. این المنت بدون CSS به شکل یک مستطیل شفاف با اندازه‌های پیش‌فرض 300 px × 150 px  (ارتفاع × عرض) و رنگ اَشکال مشکی است که می‌توان با ویژگی‌های HTML به آن مقادیر دلخواه داد.

شما می‌توانید از Canvas چندین بار در سند خود استفاده کنید. هر المنت Canvas یک گره در DOM است که می‌توان با دادن ID به هریک با جاوا‌اسکریپت به‌راحتی به آن‌ها دسترسی پیدا ‌کنید.

هر باید یک شئ context داشته باشد. این شئ تعیین می‌کند که از چه رابط کاربردی برنامه‌نویسی استفاده می‌کنید. از context 2d برای رسم اشکال دوبعدی و تغییر دادن عکس‌های پیکسلی استفاده می‌شود و از context 3d برای رسم و دست‌کاری اشکال سه‌بعدی استفاده می‌شود که WebGL (Web Graphics Library) نامیده می‌شود.WebGL یک کتابخانه برای رسم گرافیک سه‌بعدی است که در داخل  مرورگرها جاسازی‌شده (built-in) و می‌توان بدون نیاز به هیچ افزونه (plug-in) یا کتابخانه (Library) خاصی از آن در مرورگر استفاده کرد.

 

کاربردهای HTML5 Canvas :

بازی‌سازی: ویژگی‌های HTML5 Canvas آن را به یک گزینه مناسب برای ساخت هرگونه بازی 2D و 3D تبدیل کرده است.

تبلیغات: HTML5 Canvas را می‌توان جایگزین بنر‌ها و تبلیغاتی که با Flash درست‌شده‌اند کرد.

هنر و تزئینات: باکمی خیال‌پردازی و خلاقیت و تنوع رنگی، الگوها، گرادیانت و ... می‌توان گرافیک‌های بسیار زیبایی رسم کرد.

و ساخت انیمیشن ، نمایش داده و ....

 

 

کتابخانه‌های کار با  Canvas

یکی از کتابخانه‌های JavaScript که با jQuery برای jQuery  نوشته‌شده است، کتابخانه jCanvas است که بر روی API HTML5 canvas  کار می‌کند. علاوه بر اینکه jCanvas از امکانات بیشتری برخوردار است، به شما اجازه انجام همه‌کارهای معمول با Canvas را داده و حتی می‌توانید از متدهای خود Canvas نیز در jCanvas استفاده کنید.

از دیگر کتابخانه‌های کار با Canvas  می‌توان Konva، oCanvas، bHive، Paper.js و ... را نام برد.

پشتیبانی

با توجه به سایت Can I Use در سطح جهانی 97.81% کاربران از مرورگری استفاده می‌کنند که از این ویژگی پشتیبانی می‌کنند.

مرورگرهایی که از این قابلیت پشتیبانی می‌کنند عبارت‌اند از:

Safari 2.0+

Chrome 3.0+

Firefox 3+

Internet explorer 9.0+

Opera 10.0+

Ios 1.0+

Android 1.0+

 

 

برای دیدن مثال‌هایی از Canvas می‌توانید به این لینک‌ها مراجعه کنید:

http://www.overthetinyhills.com/

http://andrew.wang-hoyer.com/experiments/cloth/

https://www.freeriderhd.com/t/330590-the-brushes-are-back

http://matthew.wagerfield.com/flat-surface-shader/

http://lab.hakim.se/trail/03/

http://lab.hakim.se/origami/

 

 

منابع

www.sourcecodes.ir

www.7learn.com

www.w3school.com

sitepoint.com

دیدگاه کاربران
تاکنون دیدگاهی ثبت نشده است
گروه مقالات
مقالات مرتبط
ارسال دیدگاه