canvas,一个脱离掌控的动画

打开后静等5S,会有天使哦~非常的炫酷。
read me: 你可以修改changeV这个函数中的count峰值,或者延时数值,玩儿一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>qdabc.cn</title>
</head>
<style>
    body{background:black; overflow: hidden;}
</style>
<body>
    <script>
        function getRandom(min, max){
            return Math.floor(Math.random()*(max-min)+min);
        }
        function Canvas(){
            this.pos = [];
            this.numMax = 768;
            this.width = window.innerWidth;
            this.height = window.innerHeight;
            this.rx = this.width/2;
            this.ry=this.height/2;
            this.cxt; 
            this.v = 1.25; //点的速度
            this.dcolor=2;
        
        }
        // 创建节点、设置属性、获取对象
        Canvas.prototype.createEle = function(){
            var ele = document.createElement("canvas");
            ele.id = "canvas";
            ele.value = "sorry,your browser can not support canvas!";

            ele.width = this.width;
            ele.height = this.height;
            this.cxt = ele.getContext('2d');
            document.body.appendChild(ele);
        }
        Canvas.prototype.setCircle = function(){
            var color, flag;
            for(var i=0; i<this.numMax;i++){
                var r = ((i/128)+1 )*40; //距离圆心初始半径,一共6层
                var rotate =  (i%128)*2.8125*(Math.PI/180); //一层128个,夹角2.8125

                flag = i/128;
                if( 0 <= flag && flag < 1.0){
                    color = 'rgb(255,0,'+(i%128)*canvas.dcolor+')';
                }else if(1.0 <= flag && flag < 2.0){
                    color = 'rgb('+(255-(i%128)*canvas.dcolor)+',0,255)';
                }else if(2.0 <= flag && flag < 3){
                    color = 'rgb(0,'+(i%128)*canvas.dcolor+',255)';
                }else if(3 <= flag && flag < 4){
                    color = 'rgb(0,255,'+(255-(i%128)*canvas.dcolor)+')';
                }else if(4 <= flag && flag < 5){
                    color = 'rgb('+(i%128)*canvas.dcolor+',255,0)';
                }else if(5 <= flag && flag < 6){
                    color = 'rgb(255,'+(255-(i%128)*canvas.dcolor)+',0)';
                }

                this.pos[i] = {
                    r_max: 240, //6层间隔40,最大240
                    rotate: rotate,//所在点的相对角度
                    x: r*Math.cos(rotate)+this.width/2,
                    y: r*Math.sin(rotate)+this.height/2,
                    color: color,

                }
            }
        }
        Canvas.prototype.draw = function(x,y,r,color){
            this.cxt.save();
            this.cxt.beginPath();
            this.cxt.fillStyle = color;
            this.cxt.arc(x, y, r, 0, Math.PI*2, true);
            this.cxt.fill();
            this.cxt.restore();
        }
        Canvas.prototype.animate = function(){
            var dx;
            canvas.cxt.clearRect(0,0,canvas.width,canvas.height);
            for(var i=0;i<canvas.pos.length-1;i++){
                dx = Math.sqrt(Math.pow(canvas.ry - canvas.pos[i].y, 2)+Math.pow(canvas.rx - canvas.pos[i].x, 2));
                if( dx < 1 || dx > 300){

                    // 重置位置
                    canvas.pos[i].x = canvas.pos[i].r_max*Math.cos(canvas.pos[i].rotate)+canvas.width/2;
                    canvas.pos[i].y = canvas.pos[i].r_max*Math.sin(canvas.pos[i].rotate)+canvas.height/2;
                }
                
                //速度
                    canvas.pos[i].vx = -canvas.v*Math.cos(canvas.pos[i].rotate);
                    canvas.pos[i].vy = -canvas.v*Math.sin(canvas.pos[i].rotate);

                // 移动
                canvas.pos[i].x += canvas.pos[i].vx;
                canvas.pos[i].y += canvas.pos[i].vy;
                // 大小渐变
                canvas.pos[i].r = Math.sqrt(Math.pow(canvas.ry - canvas.pos[i].y, 2)+Math.pow(canvas.rx - canvas.pos[i].x, 2))/80;

                canvas.draw(canvas.pos[i].x, canvas.pos[i].y, canvas.pos[i].r, canvas.pos[i].color);
            
            }
            window.requestAnimationFrame(canvas.animate);

        }
        Canvas.prototype.changeV = function(){
            var count = 1;
            setInterval(function(){
                canvas.v = 1.25 * Math.pow(2, count);
                if(count++ > 3) {count = 1;}
            },5000);
        }

        var canvas = new Canvas();
        canvas.createEle();
        canvas.setCircle();
        canvas.animate();
        canvas.changeV();
    </script>
</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » canvas,一个脱离掌控的动画

赞 (0)
分享到:更多 ()

发表评论 0