وردپرس

پیشنهاد میکنیم قبل از شروع این آموزش مبحث قلبی را مطالعه فرمائید : آموزش افزودن ویدیو در html5 | تگ یا برچسب video

شروع آموزش html : یکی از داغ ترین موضوعات HTML5 موضوع canvas می باشد، اما دقیقا canvas چیست؟

 canvas یک پارچه ی ساده بافته شده ی سنگین می باشد که برای ساختن قایق، چادر، کوله پشتی، خیمه و دیگر ابزاری که استحکام الزم دارند، استفاده می شود. و همچنین توسط نقاشان به عنوان سطح نقاشی که روی چارچوب چوبی نصب شده باشد، استفاده می شود.

 شاید این جوابی که شما به دنبال آن بودید، نباشد.به هرحال canvas در HTML5 از کاربرد آن توسط هنرمندان تقلید می کند و بوم نقاشی نامیده می شود.

 بوم نقاشی یک فضای خالی بدون رنگ  ( حتی بدون سفید )است، که قرار است با مداد و قلم موی جاوااسکریپت تبدیل به یک کار هنری شود.

 البته که وجود بوم نقاشی تنها برای یک تصویر ثابت نیست. تصویر ثابت می تواند به سادگی به وسیله ی عنصر قدیمی img مورد بررسی قرار بگیرد. با جاوااسکریپت به عنوان قلم موی خود، می توانید یک انیمیشن شاد و یا حتی بازیهای تکرار شونده ایجاد کنید.

 اگر قبال انیمیشن های درخشانی ایجاد کرده اید و امید دارید که یک ورژن HTML5 ایجاد کنید، ابزاری وجود دارند که در انجام آن به شما کمک می کنند. یکی از آنها Flash to HTML5 می باشد.

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

برای ایجاد بوم نقاشی، کد ساده ی زیر الزم است.

به هرحال به یاد داشته باشید که مرز یک بوم نقاشی یک آبجکت ناپیداست. این برنامه فضایی را می گیرد اما شما آن را نمی بینید. اجازه دهید یک سبک مرزی اضافه کرده و از ID برای مرجع استفاده کنیم. هدف از ID این است که با استفاده از (document object model) DOM آن را قابل دسترس کنیم. بدون مرجع ID، جاوا اسکریپت، در این مورد قلم موی شما، هیچ ایده ای برای نقاشی روی بوم ندارد.

 اگر در قسمت باال به جای یک تیره و مربع، یک جمجمه با دو استخوان ضربدری می بینیدبه این معناست که مرورگر شما بوم نقاشی را پشتیبانی نمی کند. ممکن است تمایل داشته باشید مرورگری دانلود کنید که با بوم نقاشی کار کند، همانطور که در زیر می بینید.

پایان این بخش از آموزش

برای مطالعه بیشتر مباحث دیگر  این آموزش بر روی لینک روبرو کلیک نمائید : فهرست آموزش رایگان html5 سطح ساده تا پیشرفته