canvas 悬浮效果

Posted 2020-11-05 二月花开

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于canvas 悬浮效果的主要内容，如果未能解决你的问题，请参考以下文章

自己定义View时，用到Paint Canvas的一些温故，简单的帧动画（动画一，"掏粪男孩Gif"顺便再提提onWindowFocusChanged）(代码片段

css3代码实现的鼠标悬浮按钮效果代码实例

CSS3实现的鼠标悬浮开门关门效果代码实例

vue 悬浮效果(hover)

RecyclerView 悬浮/粘性头部效果3种方式