canvas漩涡状动画

学前段好还是后端,更多珍贵使用资源免费共享加群 120342833 验证回答 ZZ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</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层间隔50,最大300
                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>

跟帖
暂无
说几句
广告位 点击查看投放指南

我的收藏