html+css+js实现canvas跟随鼠标的小圆特效源码

效果（源码在最后）：

实现：

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.r0){
        this.remove();
   }
   }
   /* 删除小圆的函数 */   circle.prototype.remove = function (){
        /* 遍历数组，找到和调用这个函数相同的圆后用splice函数删除 */   for(let i=0;
    iarr.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;
    iarr.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.r0){
        this.remove();
   }
   }
   /* 删除小圆的函数 */   circle.prototype.remove = function (){
        /* 遍历数组，找到和调用这个函数相同的圆后用splice函数删除 */   for(let i=0;
    iarr.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;
    iarr.length;
i++){
         /* 更新 */     arr[i].updated();
     /* 如果浏览器支持，则渲染 */     if(arr[i].render()){
          arr[i].render();
     }
         }
   }
    ,30) /script>
    /body>
    /html>
    

其它：

今日三省吾身：安逸的生活没意思，充满挑战，取得胜利，才是生命真谛。

到此这篇关于html+css+js实现canvas跟随鼠标的小圆特效源码的文章就介绍到这了,更多相关canvas跟随鼠标的小圆内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• 去除HTML标签删除HTML示例代码
• 利用前端HTML+CSS+JS开发简单的TODOLIST功能（记事本）
• html5以及jQuery实现本地图片上传前的预览代码实例讲解
• js+html+css实现手动轮播和自动轮播
• 在HTML中使用JavaScript的两种方法
• 如何学习html的各种标签

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！