مانیستر دات آی آر

در این پست یاد میگیرین چجوری با استفاده از تگ  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);

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

کد و دمو