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

آموزش کامل canvas در html5 | آموزش فارسی و رایگان

این مورد را ارزیابی کنید
(0 رای‌ها)
منتشرشده در آموزش html

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

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

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

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

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

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

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

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

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

<canvas width="200" height="200"></canvas>

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

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

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

آموزش کامل canvas در html5

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

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

خواندن 208 دفعه
محسن محمد

با نگاهی گذرا به وب سایت های مشابه سایتپ , پی به تفاوت محصولات منتشر شده در سایتپ و این سایت ها خواهید برد .

ما در سایت ایران تمام سعیمان بر این است که محصولاتی را در اختیار شما عزیزان قرار دهیم که صحت کارکرد آنها بررسی شده و قابل استفاده باشند . در اکثر وب سایت های مشابه سایت ایران این دو مورد نادیده گرفته شده و کاربر پس از دانلود محصول مورد نظرش امکان استفاده از آنرا ندارد. به عبارت ساده تر وب سایت های مذکور فقط منتشر کننده هستند و از درستی آنها اطمینان حاصل نمیکنند .

ما این اطمینان خاطر را به شما میدهیم که محصولاتی را از سایت ایران دانلود خواهید کرد که قبل از انتشار , بطور کامل بررسی شده اند و قابل استفاده میباشند.

www.mohssen.ir | این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید

مقالات آموزشی سایتپ

  • امکان جدید کامپوننت کاتو k2در مدیریت تگ ها یا برچسب ها
    امکان جدید کامپوننت کاتو k2در مدیریت تگ ها یا برچسب ها سلام جوملا دوست عزیز ، بسیار خوشحالیم که شما هم از این سیستم قدرتمند برای کسب و کار خود استفاده میکنید . یکی از مشکلات اساسی کار کردن با کامپوننت جوملا k2 برچسب گذاری برای مطالب سایت بوده است که خوشبختانه این مورد در جدیدترین نسخه k2 یعنی V2.10.3 به…
    آموزش جوملا خواندن 51 بار
  • آموزش افکت زیبای سورس کد ماوس هاور Css argyleink
    آموزش افکت زیبای سورس کد ماوس هاور Css argyleink زیبایی در قالب وب سایت ، مهمترین دلیل جذب کاربران جدید است . قصد داریم آموزش css سورس کدی را خدمتتان معرفی کنیم که میتواند تغییری هر چند ناچیز اما مهم در لینک های سایت شما ایجاد کند . با استفاده از این سورس کد css میتوانید براحتی یک ماوس…
    آموزش css خواندن 80 بار
  • مشکل دو زبانه کردن جوملا 3 در تگ html با خصوصیت rtl به ltr
    مشکل دو زبانه کردن جوملا 3 در تگ html با خصوصیت rtl به ltr سلام به جوملا دوستان عزیز، در حال پیاده سازی یک وب سایت چند زبانه بودیم که با یک مشکل عجیب مواجه شدیم. ما زمانی که سیستم جوملا را چند زبانه کردیم ، برای ایجاد خصوصیت های LTR و RTL که بتوانیم به هر کدام از زبان ها یک STYLE مختلف…
    آموزش جوملا خواندن 168 بار
  • آموزش اجرا و نمایش متن در بوم نقاشی html5
    آموزش اجرا و نمایش متن در بوم نقاشی html5 پیشنهاد میکنیم قبل از شروع این آموزش مبحث قلبی را مطالعه فرمائید : آموزش طراحی تصویر در بوم نقاشی html5 شروع آموزش : کلمات جادویی برای چاپ متن در بوم نقاشی عبارتند از Fillstyle ،Strokestyle ،Font ،TextBaseline و در انتها filltext و stroketext. <div> <canvas id="c6" width="600" height="200" style="border:solid 1px…
    آموزش html خواندن 63 بار
نمایش تمام مقالات سایتپ - کلیک نمائید