canvas 悬浮效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas id="bubble"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById('bubble');
        var w = window.innerWidth;
        var h = window.innerHeight
        canvas.width=w;
        canvas.height=h;
        window.onresize=function(){
             w = window.innerWidth;
             h = window.innerHeight
            canvas.width=w;
            canvas.height=h;
        }
        var canCon=canvas.getContext('2d');
        // var y=100,x=100;
        // setInterval(function(){
        //     canCon.clearRect(0,0,w,h);
        //     canCon.beginPath();
        //     canCon.fillStyle='red';
        //     canCon.arc(200,y++,100,0,Math.PI*2)
        //     canCon.fill();
        // },1000/60);

        function random(min,max){
            return Math.random()*(max-min)+min;
        }
        var colorArray = ['#e08031','#c7ceb2','#199475','#0b6e48','#044d22'];
        function Bubble(){};
        var bubble =new Bubble();
        Bubble.prototype={//定义属性
             init:function(){//所有泡泡的基本零件
                 this.x=random(0,w);//浏览器的最左边到最右边
                 this.y=random(0,h);//浏览器的最左边到最右边
                 this.r=random(0,2);//http://www.peise.net/颜色
                 this.color=colorArray[Math.floor(random(0,5))];
                 this.xr=random(-1,1);
                 this.yr=random(-1,1);
                 this.D=50;
             },
             draw:function(){
                 canCon.beginPath();
                 canCon.fillStyle=this.color;
                 canCon.arc(this.x,this.y,this.r,0,Math.PI*2)
                 canCon.fill();
             },
             update:function(){
                 this.x+=this.xr;
                 this.y+=this.yr;
                 if(this.x-this.r<0 || this.x+this.r>w){
                     this.xr = -this.xr;
                 }else if(this.y-this.r<0 || this.y+this.r>h){
                    this.yr = -this.yr;
                 }
                 this.xD= (positionX-this.x<0)?-(positionX-this.x):(positionX-this.x); //小球和鼠标的位置距离
                 this.yD= (positionY-this.y<0)?-(positionY-this.y):(positionY-this.y); //小球和鼠标的位置距离
                 if(this.xD<this.D&&this.yD<this.D){
                     this.r+=1;
                     if(this.r>100){this.r=100};
                 }else if(this.r>4&&this.xD>this.D&&this.yD>this.D){
                     this.r-=1;
                 }
                 this.draw();
             }
        }
         
         var bublleArray = [];
         function create(){
             var bubble =new Bubble();//shengcheng
             bubble.init();//小泡泡的样子
             bubble.draw();
             bublleArray.push(bubble);//一出生就保存
         }
         for(var i=0;i<10000;i++){
             create();
         }
         setInterval(function(){
             canCon.clearRect(0,0,w,h);
             for(var b of bublleArray){
               b.update();
             }
         },1000/60);
         var positionX,positionY;
         canvas.onmousemove=function(){
             var ev = ev || window.event;
             positionX=ev.clientX;
             positionY=ev.clientY;
             positionX=ev.clientX;
         }
        //春函数就是只进行计算
    </script>
</body>
</html>
原文地址:https://www.cnblogs.com/hss-blog/p/9040448.html