首页 > 代码库 > canvas时间粒子

canvas时间粒子

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><canvas id="canvas" style="width:500px;">当前浏览器不支持canvas,请更换浏览器后再试</canvas><script src="js/canvasTime.js" type="text/javascript" ></script></body></html>

JS封装

(function(){    var digit=    [        [            [0,0,1,1,1,0,0],            [0,1,1,0,1,1,0],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [0,1,1,0,1,1,0],            [0,0,1,1,1,0,0]        ],//0        [            [0,0,0,1,1,0,0],            [0,1,1,1,1,0,0],            [0,0,0,1,1,0,0],            [0,0,0,1,1,0,0],            [0,0,0,1,1,0,0],            [0,0,0,1,1,0,0],            [0,0,0,1,1,0,0],            [0,0,0,1,1,0,0],            [0,0,0,1,1,0,0],            [1,1,1,1,1,1,1]        ],//1        [            [0,1,1,1,1,1,0],            [1,1,0,0,0,1,1],            [0,0,0,0,0,1,1],            [0,0,0,0,1,1,0],            [0,0,0,1,1,0,0],            [0,0,1,1,0,0,0],            [0,1,1,0,0,0,0],            [1,1,0,0,0,0,0],            [1,1,0,0,0,1,1],            [1,1,1,1,1,1,1]        ],//2        [            [1,1,1,1,1,1,1],            [0,0,0,0,0,1,1],            [0,0,0,0,1,1,0],            [0,0,0,1,1,0,0],            [0,0,1,1,1,0,0],            [0,0,0,0,1,1,0],            [0,0,0,0,0,1,1],            [0,0,0,0,0,1,1],            [1,1,0,0,0,1,1],            [0,1,1,1,1,1,0]        ],//3        [            [0,0,0,0,1,1,0],            [0,0,0,1,1,1,0],            [0,0,1,1,1,1,0],            [0,1,1,0,1,1,0],            [1,1,0,0,1,1,0],            [1,1,1,1,1,1,1],            [0,0,0,0,1,1,0],            [0,0,0,0,1,1,0],            [0,0,0,0,1,1,0],            [0,0,0,1,1,1,1]        ],//4        [            [1,1,1,1,1,1,1],            [1,1,0,0,0,0,0],            [1,1,0,0,0,0,0],            [1,1,1,1,1,1,0],            [0,0,0,0,0,1,1],            [0,0,0,0,0,1,1],            [0,0,0,0,0,1,1],            [0,0,0,0,0,1,1],            [1,1,0,0,0,1,1],            [0,1,1,1,1,1,0]        ],//5        [            [0,0,0,0,1,1,0],            [0,0,1,1,0,0,0],            [0,1,1,0,0,0,0],            [1,1,0,0,0,0,0],            [1,1,0,1,1,1,0],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [0,1,1,1,1,1,0]        ],//6        [            [1,1,1,1,1,1,1],            [1,1,0,0,0,1,1],            [0,0,0,0,1,1,0],            [0,0,0,0,1,1,0],            [0,0,0,1,1,0,0],            [0,0,0,1,1,0,0],            [0,0,1,1,0,0,0],            [0,0,1,1,0,0,0],            [0,0,1,1,0,0,0],            [0,0,1,1,0,0,0]        ],//7        [            [0,1,1,1,1,1,0],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [0,1,1,1,1,1,0],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [0,1,1,1,1,1,0]        ],//8        [            [0,1,1,1,1,1,0],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [1,1,0,0,0,1,1],            [0,1,1,1,0,1,1],            [0,0,0,0,0,1,1],            [0,0,0,0,0,1,1],            [0,0,0,0,1,1,0],            [0,0,0,1,1,0,0],            [0,1,1,0,0,0,0]        ],//9        [            [0,0,0,0,0,0,0],            [0,0,1,1,1,0,0],            [0,0,1,1,1,0,0],            [0,0,1,1,1,0,0],            [0,0,0,0,0,0,0],            [0,0,0,0,0,0,0],            [0,0,1,1,1,0,0],            [0,0,1,1,1,0,0],            [0,0,1,1,1,0,0],            [0,0,0,0,0,0,0]        ]//:    ];    var canvas = document.getElementById(‘canvas‘);    //声明canvas的宽高    var H = 100,W = 700;    canvas.height = H;    canvas.width = W;      if(canvas.getContext){        var cxt = canvas.getContext(‘2d‘);    }    cxt.fillStyle = ‘#f00‘;    cxt.fillRect(10,10,50,50);            //存储时间数据    var data =http://www.mamicode.com/ [];    //存储运动的小球    var balls = [];    //设置粒子半径    var R = canvas.height/20-1;//改变粒子大小    (function(){        var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());        //存储时间数字,由十位小时、个位小时、冒号、十位分钟、个位分钟、冒号、十位秒钟、个位秒钟这7个数字组成        data.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);        })();    /*生成点阵数字*/    function renderDigit(index,num){        for(var i = 0; i < digit[num].length; i++){            for(var j = 0; j < digit[num][i].length; j++){                if(digit[num][i][j] == 1){                    cxt.beginPath();                    cxt.arc(14*(R+2)*index + j*2*(R+1)+(R+1),i*2*(R+1)+(R+1),R,0,2*Math.PI);                    cxt.closePath();                    cxt.fill();                }            }        }            }    /*更新时钟*/    function updateDigitTime(){        var changeNumArray = [];        var temp = /(\d)(\d):(\d)(\d):(\d)(\d)/.exec(new Date());        var NewData =http://www.mamicode.com/ [];        NewData.push(temp[1],temp[2],10,temp[3],temp[4],10,temp[5],temp[6]);        for(var i = data.length-1; i >=0 ; i--){            //时间发生变化             if(NewData[i] !== data[i]){                //将变化的数字值和在data数组中的索引存储在changeNumArray数组中                changeNumArray.push(i+‘_‘+(Number(data[i])+1)%10);            }        }        //增加小球        for(var i = 0; i< changeNumArray.length; i++){            addBalls.apply(this,changeNumArray[i].split(‘_‘));        }            data = NewData.concat();    }    /*更新小球状态*/    function updateBalls(){        for(var i = 0; i < balls.length; i++){            balls[i].stepY += balls[i].disY;            balls[i].x += balls[i].stepX;            balls[i].y += balls[i].stepY;                if(balls[i].x > W + R || balls[i].y > H + R){                balls.splice(i,1);                i--;            }                        }    }    /*增加要运动的小球*/    function addBalls(index,num){        var numArray = [1,2,3];        var colorArray =  ["#3BE","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#F44","#C00"];        for(var i = 0; i < digit[num].length; i++){            for(var j = 0; j < digit[num][i].length; j++){                if(digit[num][i][j] == 1){                    var ball = {                        x:14*(R+2)*index + j*2*(R+1)+(R+1),                        y:i*2*(R+1)+(R+1),                        stepX:Math.floor(Math.random() * 4 -2),                        stepY:-2*numArray[Math.floor(Math.random()*numArray.length)],                        color:colorArray[Math.floor(Math.random()*colorArray.length)],                        disY:1                    };                    balls.push(ball);                            }            }        }        }    /*渲染*/    function render(){        //重置画布宽度,达到清空画布的效果        canvas.height = 100;        //渲染时钟        for(var i = 0; i < data.length; i++){            renderDigit(i,data[i]);        }                //渲染小球        for(var i = 0; i < balls.length; i++){            cxt.beginPath();            cxt.arc(balls[i].x,balls[i].y,R,0,2*Math.PI);            cxt.fillStyle = balls[i].color;            cxt.closePath();            cxt.fill();                        }    }    clearInterval(oTimer);    var oTimer = setInterval(function(){        //更新时钟        updateDigitTime();        //更新小球状态        updateBalls();        //渲染        render();    },50);   })(); 

 

技术分享

 

canvas时间粒子