彩色小球的重现以及下雪效果的实现

之前我看到一篇文章是介绍彩色小球的实现;

链接:http://www.cnblogs.com/xiaohuochai/p/6370123.html

我按照他的思路也写了一个:

代码:

 

var canvas = document.getElementById('canvas');
    var H = 300,W = 500;
    canvas.height = H;
    canvas.width = W;

    var Num = 30;
    //小球个数

    btn.onclick = function(){history.go();}

    var balls = [];

    function getBalls(){
        var cxt = canvas.getContext('2d');
        for (var i = 0; i < Num; i++) {
            var tempR = (Math.random()*255)|0;
            var tempG = (Math.random()*255)|0;
            var tempB = (Math.random()*255)|0;

            var tempColor = 'rgb(' +tempR+','+tempG +','+tempB+')';
            //填充物体的颜色
            //随机的小球颜色
            
            var posiR = (Math.random()*30+20)|0;//半径?
            var posiX = (Math.random()*(W-posiR))|0;
            var posiY = (Math.random()*(H-posiR))|0;
            //圆的横纵坐标和半径
            

            var tempBall = {
                x:posiX,
                y:posiY,
                r:posiR,
                stepX:(Math.random()*13-6)|0,// 运动方向
                stepY:(Math.random()*13-6)|0,//?
                color:tempColor
            }

            balls[balls.length] = tempBall;


            // cxt.beginPath();
            // //在绘制图形前调用,即创建一个新路径

            // cxt.arc(posiW,posiH,posiR,0,Math.PI*2);
            // //创建弧形(圆) parm:x坐标 y 坐标 半径 起始角 结束角
            
            // cxt.fill();
            // //填充当前的路径(图像)

        }
    }
    var bumpTest = function(ele){
         //左侧
        if(ele.x <= ele.r){
            ele.x = ele.r;
            ele.stepX = -ele.stepX;
        }
        //右侧
        if(ele.x >= W - ele.r){
            ele.x = W - ele.r;
            ele.stepX = -ele.stepX;
        }
        //上侧
        if(ele.y <= ele.r){
            ele.y = ele.r;
            ele.stepY = -ele.stepY;
        }
        //下侧
        if(ele.y >= H - ele.r){
            ele.y = H - ele.r;
            ele.stepY = -ele.stepY;
        }
    }

    var updateBalls = function (){
        var i = balls.length;
        while(i--){
            balls[i].x += balls[i].stepX;
            balls[i].y += balls[i].stepY; 
            bumpTest(balls[i]); 
        }
    }

    var renderBalls = function (){
        canvas.height = H;
        //重置画布高度,可以清空画布
        //
        
        var cxt = canvas.getContext('2d');
        var i = balls.length;

        while(i--){

            cxt.beginPath();

            cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,2*Math.PI);

            cxt.fillStyle = balls[i].color;

             cxt.globalCompositeOperation = 'lighter';

            cxt.closePath();//?
            //创建从当前点到起始点的路径

            cxt.fill();
        }
    }

    getBalls();//创建各个小球的初始状态;

    // renderBalls();
    clearInterval(oTimer);

    var oTimer = setInterval(function(){
        updateBalls();

        renderBalls();
    },50)

demo:

http://en.jsrun.net/ryiKp/show

而后我又想起了以前想做的下雪的效果;

于是我便做了这个效果:

一次下雪的效果实现:

    var winWidth,winHeight;

    var speed = 5;//雪花下降速度

    var Num = 10;//雪花数量


    function getWindowSize(){
        //获取窗口宽度
        if(window.innerWidth){    //兼容火狐，谷歌,safari等浏览器
            winWidth=window.innerWidth;
        }else if((document.body)&&(document.body.clientWidth)){    //兼容IE浏览器
            winWidth=document.body.clientWidth;
            }
        
        //获取窗口高度
        if(window.innerHeight){
            winHeight=window.innerHeight;
        }else if((document.body)&&(document.body.clientHeight)){
            winHeight=document.body.clientHeight;
            }
        }
    getWindowSize();


    var main = document.getElementById('snow');


    main.style.width = winWidth + 'px';
    main.style.height = winHeight + 'px'

    document.body.style.margin = 0;


    main.style.backgroundColor = '#79c6e8';

    
    var arr = [];

    var render = function(){
        
        while(Num--){

            var RS = {
                x:(Math.random()*winWidth)|0,
                y:0,
                stepX:(Math.random()*5-2)|0,
                stepY:((Math.random()*speed)|0)+5
            }

            var img = document.createElement('div');
             img.style.width = '20px';
             img.style.height = '20px';
             img.style.background = 'url(https://files.cnblogs.com/files/Grewer/snow.gif) no-repeat -9px -3px';
             img.style.backgroundSize = '36px 27px';

             img.style.position = 'absolute';

             img.style.left = RS.x + 'px';
             img.style.top = (RS.y-20)+'px';
             main.appendChild(img);

             RS.el = img;


             arr[arr.length] = RS;

        }

         console.log(arr)
    }

    render();


    var removeElement = function (_element){
         var _parentElement = _element.parentNode;
         if(_parentElement){
                _parentElement.removeChild(_element);
         }
    }

    var check = function(list){
        if(list.x-20 <= 0){
            removeElement(list.el)
            return true
        }

        if(list.x+20 >= winWidth){
            removeElement(list.el)
            return true
        }

        if(list.y+20 > winHeight){
            removeElement(list.el)
            return true;
        }

        return false;
    }



     var update = function(){
         var i = arr.length;
         while(i--){
             var list = arr[i],
             obj = list.el;

             list.x += list.stepX;
             obj.style.left = list.x + 'px';

             list.y += list.stepY;
             obj.style.top = list.y + 'px';

             if(check(list)){
                 arr.splice(i,1);
             }
         }
         console.log(arr.length)
         if(arr.length === 0){
             console.log(1)
             return false;
         }
    }

     var q = setInterval(function(){
         if(update() === false){
             console.log(123)
             clearInterval(q);
         }
     },100)

 

 经过整理后的连续下雪的效果:

-(function(){

    var Grewer = {
        init:function(option){
            option = option || {};

            this.speed = option.speed || 5;//雪花下降速度

            //获取窗口宽度    
            this.getWindowSize();


            this.main = document.getElementById('snow');


            this.main.style.width = this.winWidth + 'px';
            this.main.style.height = this.winHeight + 'px'

            document.body.style.margin = 0;


            this.main.style.backgroundColor = '#79c6e8';
            //背景色

            this.arr = [];

            this.run(option);
        },
        getWindowSize:function(){
            if(window.innerWidth){  
                this.winWidth=window.innerWidth;
            }else if((document.body)&&(document.body.clientWidth)){   
                this.winWidth=document.body.clientWidth;
            }

                if(window.innerHeight){
                    this.winHeight=window.innerHeight;
                }else if((document.body)&&(document.body.clientHeight)){
                    this.winHeight=document.body.clientHeight;
                }
                
            },
            render:function(num){
                this.Num = (num * Math.random())|0;
                //雪花数
                while(this.Num--){
                    var RS = {
                        x:(Math.random()*this.winWidth)|0,
                        y:0,
                        stepX:(Math.random()*5-2)|0,
                        stepY:((Math.random()*this.speed)|0)+this.speed
                    }

                    var img = document.createElement('div');
                    img.style.width = '20px';
                    img.style.height = '20px';

                    img.style.background = 'url(https://files.cnblogs.com/files/Grewer/snow.gif) no-repeat -9px -3px';
                    img.style.backgroundSize = '36px 27px';

                    // img.innerHTML = '*';
                    // img.style.color = '#fff';

                    img.style.position = 'absolute';

                    img.style.left = RS.x + 'px';
                    img.style.top = (RS.y-20)+'px';
                    this.main.appendChild(img);

                    RS.el = img;


                    this.arr.push(RS);

                }
            },
            update:function(){
                var i = this.arr.length;
                while(i--){
                    var list = this.arr[i],
                    obj = list.el;

                    list.x += list.stepX;
                    obj.style.left = list.x + 'px';

                    list.y += list.stepY;
                    obj.style.top = list.y + 'px';

                    if(this.check(list)){
                        this.arr.splice(i,1);
                    }
                }
                
            },
            removeElement:function (_element){
                var _parentElement = _element.parentNode;
                if(_parentElement){
                    _parentElement.removeChild(_element);
                }
            },
            check:function(list){
                if(list.x-20 <= 0){
                    this.removeElement(list.el)
                    return true
                }

                if(list.x+20 >= this.winWidth){
                    this.removeElement(list.el)
                    return true
                }

                if(list.y+20 > this.winHeight){
                    this.removeElement(list.el)
                    return true;
                }

                return false;
            },
            run:function(option){
                setInterval(function(){
                    snow.update();
                }
                ,100);
                setInterval(function(){
                    snow.render(option.num||10)
                },option.snowFlash||1000)
            }

        }


        window.snow = Object.create(Grewer);

})()
        // obj.init({
        //     'speed':5,
        //     'num':10,
        //     'snowFlash':1000
        // });//加入参数

        
    snow.init();

 

demo:

http://en.jsrun.net/myiKp/show

 

如有不妥之处还请指出