欢迎来到北极熊_北极熊网
帮助中心

北极熊_北极熊网

热门搜索: 通达信指标    奶茶配方    养羊技术    别墅图纸    公司网站源码   

canvas跟随鼠标的小圆特效 html+css+js

  • 时间:2021-03-15 22:07 编辑:ouf 来源:北极光之夜 阅读:146
  • 扫一扫,手机访问
摘要:效果(源码在最后):实现:1.定义标签:    北极光之夜           当前浏览器不支持Canvas,请更换浏览器后再试&nb

效果(源码在最后):

1.jpg


实现:

1.定义标签:


    <h1>北极光之夜</h1>

    <canvas  id="draw" style=" position: fixed; display: block;">       

当前浏览器不支持Canvas,请更换浏览器后再试

    </canvas>


2. 文字的基本样式:


h1{

           position: absolute;

           top: 50%;

           left: 50%;

           transform: translate(-50%,-50%);

           font-size: 5em;

           font-family: 'fangsong';

           color: rgb(38, 205, 247);

       }


top: 50%;

left: 50%;

transform: translate(-50%,-50%); 居中对齐

3. js部分,详细看注释 :


<script>

        /* 首先获取canvas画布 */

        var canvas = document.querySelector("#draw");

        var yuan = canvas.getContext("2d");      

        /* 绑定窗口大小发生改变事件,让canvas随时铺满浏览器可视区 */

         window.onresize=resizeCanvas;

        function resizeCanvas(){

            canvas.width=window.innerWidth;

            canvas.height=window.innerHeight;

        }

        resizeCanvas(); 


        /* 定义数组,存下面触发移动事件时产生的小圆 */

        var arr = [];

        

        /* 绘制小圆形的方法,x与y是初始位置,r是圆半径 */

        function circle (x,y,r){

           this.x=x;

           this.y=y;

           this.r=r;

           /* 得一个随机颜色 */

           this.color = `rgb(${255*Math.random()},${255*Math.random()},${255*Math.random()})`

           /* 圆的移动方向,random函数为随机返回一个0.0到1.0的数,x可得随机正负数,y为随机正数 */

           this.xZou = parseInt(Math.random()*10-5);

           this.yZou = parseInt(Math.random()*10);      

           /* 向arr数组末尾添加这个元素 */    

           arr.push(this);

        }


        /* 更新圆形的方法 */

         circle.prototype.updated = function() {

             /* x和y增加,呈现圆形一直走 */

            this.x = this.x + this.xZou ;

            this.y = this.y + this.yZou ;

            /* 半径慢慢减少 */

            this.r = this.r - 0.1 ;

            /* 当半径小于1清除这个圆 */

            if(this.r<0){

                this.remove();

            }

         }

         /* 删除小圆的函数 */

         circle.prototype.remove = function (){

              /* 遍历数组,找到和调用这个函数相同的圆后用splice函数删除 */

            for(let i=0;i<arr.length;i++){

                  if(this==arr[i])

                  {

                      arr.splice(i,1);

                  }

            }

        }

         /* 渲染小圆 */

         circle.prototype.render = function(){


            yuan.beginPath();

            yuan.arc(this.x,this.y,this.r,0,2*3.14,false);

            yuan.fillStyle = this.color;

            yuan.fill();

         }

         /* 给画布绑定鼠标经过事件 */       

         canvas.addEventListener('mousemove',function(e){

             /* 传入x,y,r。offsetX距离左侧距离,.., */

            new  circle(e.offsetX,e.offsetY,Math.random()*15); 

         })


                /* 定时器渲染小圆,开始动画 ,30毫秒一次 */

         setInterval(function(){

                 /* 清屏 */

               yuan.clearRect(0,0,canvas.width,canvas.height);

               /* 循环数组,给每个小圆更新和渲染 */

               for(let i=0;i<arr.length;i++){

                    /* 更新 */

                    arr[i].updated();

                    /* 如果浏览器支持,则渲染 */

                    if(arr[i].render()){

                        arr[i].render();

                    }

                    

               }


         },30)


    </script>


canvas链接

splice()方法链接

random()方法链接

push()方法链接

resize事件链接


完整源码:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

       *{

           margin: 0;

           padding: 0;

           box-sizing: border-box;

       }

       

       body{

           background-color: rgb(72, 75, 122);

       }

       

       h1{

           position: absolute;

           top: 50%;

           left: 50%;

           transform: translate(-50%,-50%);

           font-size: 5em;

           font-family: 'fangsong';

           color: rgb(38, 205, 247);

       }

      

    </style>

</head>

<body>

   

     <h1>北极光之夜</h1>


    <canvas  id="draw" style=" position: fixed; display: block;">       

当前浏览器不支持Canvas,请更换浏览器后再试

    </canvas>


    <script>

        /* 首先获取canvas画布 */

        var canvas = document.querySelector("#draw");

        var yuan = canvas.getContext("2d");      

        /* 绑定窗口大小发生改变事件,让canvas随时铺满浏览器可视区 */

         window.onresize=resizeCanvas;

        function resizeCanvas(){

            canvas.width=window.innerWidth;

            canvas.height=window.innerHeight;

        }

        resizeCanvas(); 


        /* 定义数组,存下面触发移动事件时产生的小圆 */

        var arr = [];

        

        /* 绘制小圆形的方法,x与y是初始位置,r是圆半径 */

        function circle (x,y,r){

           this.x=x;

           this.y=y;

           this.r=r;

           /* 得一个随机颜色 */

           this.color = `rgb(${255*Math.random()},${255*Math.random()},${255*Math.random()})`

           /* 圆的移动方向,random函数为随机返回一个0.0到1.0的数,x可得随机正负数,y为随机正数 */

           this.xZou = parseInt(Math.random()*10-5);

           this.yZou = parseInt(Math.random()*10);      

           /* 向arr数组末尾添加这个元素 */    

           arr.push(this);

        }


        /* 更新圆形的方法 */

         circle.prototype.updated = function() {

             /* x和y增加,呈现圆形一直走 */

            this.x = this.x + this.xZou ;

            this.y = this.y + this.yZou ;

            /* 半径慢慢减少 */

            this.r = this.r - 0.1 ;

            /* 当半径小于1清除这个圆 */

            if(this.r<0){

                this.remove();

            }

         }

         /* 删除小圆的函数 */

         circle.prototype.remove = function (){

              /* 遍历数组,找到和调用这个函数相同的圆后用splice函数删除 */

            for(let i=0;i<arr.length;i++){

                  if(this==arr[i])

                  {

                      arr.splice(i,1);

                  }

            }

        }

         /* 渲染小圆 */

         circle.prototype.render = function(){


            yuan.beginPath();

            yuan.arc(this.x,this.y,this.r,0,2*3.14,false);

            yuan.fillStyle = this.color;

            yuan.fill();

         }

         /* 给画布绑定鼠标经过事件 */       

         canvas.addEventListener('mousemove',function(e){

             /* 传入x,y,r。offsetX距离左侧距离,.., */

            new  circle(e.offsetX,e.offsetY,Math.random()*15); 

         })


                /* 定时器渲染小圆,开始动画 ,30毫秒一次 */

         setInterval(function(){

                 /* 清屏 */

               yuan.clearRect(0,0,canvas.width,canvas.height);

               /* 循环数组,给每个小圆更新和渲染 */

               for(let i=0;i<arr.length;i++){

                    /* 更新 */

                    arr[i].updated();

                    /* 如果浏览器支持,则渲染 */

                    if(arr[i].render()){

                        arr[i].render();

                    }

                    

               }


         },30)


    </script>

</body>

</html>

————————————————


  • 全部评论(0)
资讯详情页最新发布上方横幅
联系我们
电话:18936411277
邮箱:1044412291@qq.com
时间:09:00 - 19:00
公众号:北格软件
底部广告