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

北极光之夜。 发表于 2021/06/11 17:21:17 2021/06/11
【摘要】 效果(源码在最后): 实现:1.定义标签: <h1>北极光之夜</h1> <canvas id="draw" style=" position: fixed; display: block;"> 当前浏览器不支持Canvas,请更换浏览器后再试 </canvas>2. 文字的基本样式:h1{ position: absolute; ...

效果(源码在最后):

在这里插入图片描述

实现:

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 lang="zh-CN">
<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>

其它:

下次见~

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。