close
تبلیغات در اینترنت
آموزش ساخت انیمیشن دایره ها با تگ canvas

آموزش های رایگان طراحی وب

قالب های رایگان زیبا و بهینه

طراحی پوسته اختصاصی


آموزش هک و امنیت

پاسخ به مشکلات کدنویسی

آموزش با طنز و تفریح!




در این پست یاد میگیرین چجوری با استفاده از تگ  canvas یه انیمیشنی از دایره های رنگی بسازید . همان طور که میدونین (یا شایدم نمیدونین :دی) کنواس canvas یکی از تگ های HTML5 هستش که به ما یه محدوده ی خالی برای نقاشی ایجاد میکنه .

خب شما باید یه تابع بنویسید که رنگ های تصادفی بر گردونه .

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

    function choicecolor(){
        var colorsparameters='0123456789ABCDEF'.split(''),
        colorok='',
        i=0;
        while(i<6){
            colorok+=colorsparameters[parseInt(Math.random()*16)]
            i++
        }
        return '#'+colorok;
    }

من اینجا از حلقه ی while استفاده کردم چون عشقم می کشید :دی ولی میتونین از حلقه ی for هم استفاده کنین زیاد با هم فرق ندارن .

خب این تابع برای ما رنگ تصادفی به صورت هگز درست میکنه ...


حالا قسمت دایره های انیمیشنمونو می نویسیم

    function pathcircle(){
    var randomx = {
        x:Math.floor(Math.random()*1200),
        y:Math.floor(Math.random()*500)
    }
    var can = document.getElementById('mycan');
    var ctx = can.getContext('2d');
    ctx.beginPath();
    ctx.arc(randomx.x,randomx.y,50,0,Math.PI*2,false);
    ctx.fillStyle=choicecolor();
    ctx.fill();
    }

دایره هامونو هم داخل یه تایع به اسم pathcircle میذاریم .

در خط بعدی یه object تعریف کردیم که x یه عدد تصادفی بین 0 و 1200 گرفته و y یه عدد تصادفی بین 0 تا 500 گرفته که برای position های دایره ها استفاده میکنیم توجه کنید اینارو داخل setInterval قرار دهید نه خارج از آن .

دلیل ؟ چون با هر بار اجرا شدن عدد های مختلفی در متغیر های x , y ذخیره میشه ...

خب بقیه کار ها شم معلومه دیگه ... arc برای کشیدن کمانه و Math.PI*2 هم مخفف کد زیره:

var degress=45;
var radians=(Math.PI / 180) * degress;

البته نمیشه گفت مخفف در اصل برای تبدیل درجه به رادیان از کد بالا استفاده میکنیم ...

در این قسمت ctx.fillStyle=choicecolor رنگ دایره ها رو برابر با رنگی که از تابعchoicecolor بدست میاد گذاشتیم . و با ctx.fill دایره رو کشیدیم

در آخر با استفاده از setInterval تابع pathcircleرو برای انیمیشن سازی تکرار میکنیم :

    setInterval('pathcircle()',2000);

در نهایت ما همچین چیزی کدنویسی کردیم :

کد و دمو


نوشته شده در موضوع در دوشنبه 15 دي 1393به دست Ehsan

درباره ی نویسنده ی این مطلب

مشاهده ی نوشته های این نویسنده

نظرات کاربران

سوالی درباره ی این مطلب دارید؟ خب بپرسید!
لطفا به نکات زیر توجه فرمایید :
1. سوالات نامربوط با مطلب فوق را در انجمن بپرسید.
2. نظرات محتوی هر گونه فحاشی اگر چه تایید می شوند ولی قسمت های ناپسند آن فیلتر می شود.
3. لطفا برای دریافت پاسختون هر از گاهی به نظرات مطلب مورد نظر سر بزنید.
این نظر رو ناشناس برامون تو تاریخ 1393/10/15و ساعت 21:35 فرستاده :
قربونت برم با اون پست هات ...

پاسخ : بخورمت )


نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:):(;):D;)):X:?:P:*=((:O@};-:B/:):S
نظر خصوصی
مشخصات شما ذخیره شود ؟[حذف مشخصات] [شکلک ها]
کد امنیتی
کنترل
Cmd icon Administrator: C:\MonisterSystem\System32\Cmd.exe
Monister Cmd panel [Version 3.2.0]
(c) 2016 Monister corporation . All rights reserved .
C:\Users\Monister.ir> _click here type push enter...
دوست عزیزم سلام!
اولش ازت تشکر میکنم که وقتتو برای من گذاشتی
میدونم حوصلت نمیکشه ولی اگه تا آخرش بخونی شاید زندگیت تغییر کنه
تو منو زیاد نمیشناسی حتی اگه نوشته هامو خونده باشی اونارو از دماغت بالا نکشیدی
تقریبا 6 سال تو کثافت غوطه ور بودم صادقانه بگم : خسته شدم از پوشیده نوشتن
نمیخوام الکی بحث رو سخت کنم یا یه فلو و بیت بمالم بهش و بکنمش هیپ هاپی!
به هر چیزی پناه بردم تا خودم با خودِ درونم روبرو نشم ولی اشتباه کردم!
در حقیقت میخوام بگم کارای آخرم واقعا افتضاح بودن! نوشته هام ، سورس هام و راه رفتنام!
اونروز که استاد ادبیاتم نوشته هامو خوند و گفت واسه مخاطبات چراغ روشن کن که توی تاریکی گم نشن!
من نفهمیدم چی گفت! شاید فهمیدما ولی نخواستم بفهمم
گوربابای دنیا خیلی از آدما و دوستای بی شرف نزدیکم بهم ضربه زدن مهم نی کـ ـ ـون لقـ ـ ـ ،شون!
آروم باش! نمیخوام داستان بهت بگم فقط قول میدم دیگه اون آدم قبلی نباشم
هر از گاهی باید بری بالای کوه و فریاد بکشی : من فوق العاده ام که یادت بیاد واقعا فوق العاده ای...
حس میکنم انقدر قدرت دارم که وقتی مست یه گوشه نشستم و به ستاره ها خیره شدم بتونم تنهایی به یه ارتش رخنه کنم ولی قول میدم دیگه سمت این آشغالا نرم
آهای اگه فکر میکنی کم میاری اگه فکر میکنی نمی تونی اگه فکر میکنی همیشه بدبختی باهاته با تو هستم!
با من تکرار کن!
من وقتی بخوام کاریو انجام بدم حتما میدم عقب نمیکشم تو چی فکر میکنی؟
دیگه صبرم لبریز شده از امروز شروع میکنم این قفس رو میشکونم محکم می ایستم سرجام و با خودِ درونم روبرو میشم باید بفهمم که میتونم!
من چیزی از بقیه کم ندارم... از اونایی که تونستن! باید هیچ وقت تسلیم نشم
بیا دستمو بگیر... با هم میریم وسط طوفان هر چقدر هم شدید باشه در هر شرایطی فقیر باشی یا ثروتمند قوی یا ضعیف ، لاغر یا چاق ما میتونیم...
ما میتونیم به خواسته هامون برسیم . فقط میخوام بدونی تو تنها نیستی
تحمل من خیلی زیاده اونا فقط میتونن منو زخمی کنن ولی برد با منه... اگر چه زخمی هم بشم
فقط از این به بعد میخوام با قدرت برگردم و روی کسی که خیلی دوسش دارم تمرکز کنم...
قول میدم دیگه هیچ وقت زیر قولم نزنم!
احساس خوبی دارم چون ... هه من فوق العاده ام!!!!!
منتظر من باشین من برگشتم...!