主页 / 网络编程 /

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

网络编程 2021-07-04 14:07www.168986.cn编程入门
这篇文章主要介绍了html+css+js实现canvas跟随鼠标的小圆特效源码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

效果（源码在）

实现

1.定义标签

 <h1>北极光之夜</h1>
 <canvas id="draw" style=" position: fixed; display: block;">  
			当前浏览器不支持Canvas，请更换浏览器后再试
 </canvas>

2. 文字的基本样式

h1{
   position: absolute;
   : 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   font-size: 5em;
   font-family: 'fangsong';
   color: rgb(38, 205, 247);
  }

: 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(); 

  / 定义数组，存狼蚁网站SEO优化触发移动事件时产生的小圆 /
  var arr = [];
  
  / 绘制小圆形的方法，x与y是初始位置，r是圆半径 /
  function circle (x,y,r){
   this.x=x;
   this.y=y;
   this.r=r;
   / 得一个随机颜色 /
   this.color = `rgb(${255Math.random()},${255Math.random()},${255Math.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,23.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>





完整源码

<!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;
   : 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(); 

  / 定义数组，存狼蚁网站SEO优化触发移动事件时产生的小圆 /
  var arr = [];
  
  / 绘制小圆形的方法，x与y是初始位置，r是圆半径 /
  function circle (x,y,r){
   this.x=x;
   this.y=y;
   this.r=r;
   / 得一个随机颜色 /
   this.color = `rgb(${255Math.random()},${255Math.random()},${255Math.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,23.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>

其它

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

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

上一篇：基于ElementUI中Table嵌套实现多选的示例代码 下一篇：js利用cookie实现记住用户页面操作

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by